muti-line-omit v1.0.1

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

定制使用