multi-line-truncation

多行文本截取 React 组件

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

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

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

Install

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

Usage

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

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

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见下 |