React cg text ellipsis
git clone https://github.com/uxcore/uxcore-cg-text-ellipsis
cd uxcore-cg-text-ellipsis
npm install
npm run serverif you'd like to save your install time，you can use uxcore-tools globally.
npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-cg-text-ellipsis
cd uxcore-cg-text-ellipsis
npm install
npm run dep
npm run startnpm run testnpm run coveragehttp://uxcore.github.io/components/cg-text-ellipsis
Yes please! See the CONTRIBUTING for details.
<CgTextEllipsis
line={2}
tipAlign="right"
uniqueKey="text-ellipsis-1"
text={'哈哈哈我很长哈哈哈我很长哈哈哈我很长哈哈哈我很长哈哈哈我很长哈哈哈我很长哈哈哈我很长哈哈哈我很长'}
/>| Name | Type | Required | Default | Comments |
|---|---|---|---|---|
| line | Number | false | 1 | 最大行数 |
| text | String | true | 要显示的文本 | |
| uniqueKey | Number / String | true | 元素唯一id | |
| ellipsisChar | String | false | '…' | 文本超出句末显示的字符串 |
| isTipAlwaysShow | Boolean | false | false | 是否总是显示Tip |
| maxTipWidth | Number | false | 400 | Tip的最大宽度 |
| tipAlign | String | 'left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' | 'topRight' | Tip显示的位置 |
| tipTextAlign | String | 'left', 'center', 'right' | 'left' | Tip中文本对其方式 |
由于代码实现采用的是js递归截取字符串，当文本内容很大，而期望行数较小时，会导致性能不好，需要引入一些算法去优化。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent