多行文本超出显示省略号…
uxcore-cg-text-ellipsis
Todo
React cg text ellipsis
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
ContributeYes 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中文本对其方式 |
由于代码实现采用的是js递归截取字符串，当文本内容很大，而期望行数较小时，会导致性能不好，需要引入一些算法去优化。
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
