一、前言
对于这个需求的实现方式,历史上有很多版本。就让我们先讨论一下几种可能。
二、历史解决办法
1.css解决显示文本过长时,只显示单行,且缺省部分使用’…’
.className{
width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
当需求只是这样的时候,我们只需要提供这样的样式即可,且兼容大部分主流浏览器。
但是事实往往没有这么简单
2.css解决显示文本过长时,只显示{n}行,且缺省部分使用’…’
.className{
width: 100px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
但是此方法只支持WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器
因为display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
这三句样式并不在W3C标准内
三、最终方案
思路:我们可以使用js来控制字节流的长度和行数,且支持所有浏览器标准。
以下,是一个本篇主角
使用方法可以查看项目中的文档
全浏览器支持是肯定的,毕竟是js实现
不得不说的是 children 这个参数,它使我们使用的姿势丰富了很多
正常使用时:
import Truncate from 'react-truncate';
<Truncate width={
200} lines={
3}>
''
</Truncate>
渲染文本Node时的使用:
import Truncate from 'react-truncate';
<Truncate width={
200} lines=