text-ellipsis
text-ellipsis copied to clipboard
Published
20 hours ago •
WisestCoder
WisestCoder
多行文本超出显示省略号…
uxcore-cg-text-ellipsis
React cg text ellipsis
Development
git clone https://github.com/uxcore/uxcore-cg-text-ellipsis
cd uxcore-cg-text-ellipsis
npm install
npm run server
if 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 start
Test Case
npm run test
Coverage
npm run coverage
Demo
http://uxcore.github.io/components/cg-text-ellipsis
Contribute
Yes please! See the CONTRIBUTING for details.
Usage
<CgTextEllipsis
line={2}
tipAlign="right"
uniqueKey="text-ellipsis-1"
text={'哈哈哈我很长哈哈哈我很长哈哈哈我很长哈哈哈我很长哈哈哈我很长哈哈哈我很长哈哈哈我很长哈哈哈我很长'}
/>
Props
| 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中文本对其方式 |
Todo
由于代码实现采用的是js递归截取字符串，当文本内容很大，而期望行数较小时，会导致性能不好，需要引入一些算法去优化。
WisestCoder