# text

文本相关

* OverFlowText
* ScrollText
* LabelTip

## 使用场景

需要特殊使用文本时使用

## 案例演示

### OverFlowText 基本使用

目标元素满足 text-overflow 条件（非行内元素且内容溢出）即可触发。即：自定义的元素，如果非文本类型，其父节点必须是非行内元素，如采用 `div、p` 等标签包裹。

基本类型 `string、number` 默认会添加 `div` 进行包裹。

---demo
```js
import { OverFlowText } from 'amos-framework';

const one = '我是很长的一段文字，鼠标滑过可显示全部';

ReactDOM.render((
  <OverFlowText>
    <p style={{ width: '100px' }}>{one}</p>
  </OverFlowText>
), _react_runner_);
```
---demoend

### OverFlowText 使用简单数据类型

`children` 为基本的字符串。

---demo
```js
import { OverFlowText } from 'amos-framework';

const one = '我是很长的一段文字，鼠标滑过可显示全部';

ReactDOM.render((
  <div style={{ width: '100px' }}>
    <OverFlowText>
      {one}
    </OverFlowText>
  </div>
), _react_runner_);
```
---demoend

### OverFlowText 使用 title 文本

传入 `title` 字符串

---demo
```js
import { OverFlowText } from 'amos-framework';

const one = '我是很长的一段文字，鼠标滑过可显示全部';

ReactDOM.render((
  <div style={{ width: '100px' }}>
    <OverFlowText title={one} />
  </div>
), _react_runner_);
```
---demoend

### OverFlowText 多行省略

> 由于在 `-webkit-box` 中

---demo
```js
import { DomHtml, OverFlowText } from 'amos-framework';

const myDatas = [
  '现在你是一名微商大佬，你需要根据我给出的商品信息撰写一条朋友圈文案。',
  '现在你是一名微商大佬，你需要根据我给出的商品信息撰写一条朋友圈文案。',
  '现在你是一名微商大佬，你需要根据我给出的商品信息撰写一条朋友圈文案。',
  '现在你是一名微商大佬，你需要根据我给出的商品'
];

ReactDOM.render((
  <div className="my-tooltip">
    <DomHtml>
      <style type="text/css" data-dhtype="btnsearch">
      {
        `.my-tooltip {
          text-align: center;
          width: 400px;
        }
        .my-tooltip-list {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          gap: 16px;
        }

        .my-tooltip-item-line1 {
          color: #3f3f3f;
          width: 160px;
        }

        .my-tooltip-item {
          display: -webkit-box;
          height: 50px;
          line-height: 25px;
          color: #3f3f3f;
          text-align: left;
          word-break: break-all;
          white-space: initial;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          width: 160px;
        }
        `
      }
      </style>
    </DomHtml>
    <div className="my-tooltip-list">
      {
        myDatas.map((d, index) => <OverFlowText key={index}><div className="my-tooltip-item-line1">{d}</div></OverFlowText>)
      }
    </div>
    <p style={{ marginTop: 26 }} />
    <div className="my-tooltip-list">
      {
        myDatas.map((d, index) => <OverFlowText key={index} multiline><div className="my-tooltip-item">{d}</div></OverFlowText>)
      }
    </div>
  </div>
), _react_runner_);
```
---demoend

### LabelTip 使用

---demo
```js
import { LabelTip } from 'amos-framework';

const tipInfo = '这是提示信息';

ReactDOM.render((
  <div style={{ width: '100px' }}>
    <LabelTip tip={tipInfo} text="基本使用" />
    <LabelTip position="right" tip={tipInfo} text="提示在右侧" />
    <LabelTip tip={tipInfo}>children方式</LabelTip>
  </div>
), _react_runner_);
```
---demoend


## props

### OverFlowText props

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| className | string | - | Popover 组件接收的 className |
| children | element | - | 内容区域 |
| title | string | - | 内容文本，优先级高于 children |
| direction | string | up | 提示框位置方向，默认 `up` |
| align | string | middle | 提示框对齐方式，默认 `middle` |
| multiline | boolean | - | 采用 `display: -webkit-box;` 实现多行时，如果行数大于 1，则需要设置 `multiline=true` 触发 trigger |

> 更多属性，详查 [提示 Popover](/#/framework/popover)

### LabelTip props

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| className | string | - | 自定义 className |
| children | ReactNode | - | 内容区域 |
| text | ReactNode | - | 内容，优先级高于 children |
| icon | String | question | tip 触发的icon组件，采用内置 icon |
| position | String | left | tip icon 所在位置，默认为内容左侧，可选值为 left 和 right |
| tip | ReactNode | - | 提示信息 |
| popoverProps | Object | - | tip 提示组件 props |

> popoverProps 详细属性，详查 [提示 Popover](/#/framework/popover)