multi-line-truncation

> 多行文本截取 React 组件

> 使用要求：容器大小固定、字体大小固定。

> 原理：利用JS计算字数和实际文本行数进行文本截取。

> 可支持带有emoji、'\n'换行符的文本

Install

> knpm i @cola/multi-line-truncation -S

Usage

常见场景：用rem作为高清方案

``jsx
import React from 'react'
import Truncation from '@cola/multi-line-truncation'

const html = document.querySelector('html')
const rate = html.style.fontSize.replace('px', '') // 获取根节点字体大小
const px = 0.3 * rate // 此处计算截取字体大小

class Index extends React.Component {
render() {
return (

text="盲盒，是指消费者不能提前得知具体产品款式的玩具盒子，具有随机属性。只有打开才会知道自己抽到了什么。不确定的刺激会加强重复决策，因此一时间盲盒成了让人上瘾的存在。就这点来看，这和买彩票颇为相像，都有赌运气的成分。" // 目标文本
contentWidth={window.screen.width - px * 2} // 容器大小，这里是屏幕大小减去两边padding
fontSize={px} // 字体大小
maxLine={3} // 最多展示3行
ellipsisRate={2.5} // 在2.5行左右的地方截取
/>

)
}
}
`

API

| 属性 | 类型 | 默认 | 说明 |
| ------------ | ------ | --------------------- | ---------------------------------- |
| text | string | | 目标文本 |
| contentWidth | number | window.screen.width` | 容器宽度(px)，不同高清方案见上demo |
| fontSize | number | 16 | 容器内字体大小 |
| maxLine | number | 3 | 最多行数 |
| ellipsisRate | number | 2.5 | 截取位置(不包括收起/展开文本) |

定制使用

| 属性 | 类型 | 默认 | 说明 |
| ------------ | -------- | ----- | ---------------------------------------------------------- |
| foldBtn | node | 收起 | 自定义“收起”按钮 |
| expandBtn | node | 全部 | 自定义“展开”按钮 |
| expanded | bool | false | 默认是否展开 |
| toggleExpand | function | - | 使收起/展开成为受控组件，需配合 expaned 使用，完整demo见下 |