干货分享---对于需求 “显示文本过长时，只显示{n}行，且缺省部分使用'...'的讨论及全网最终解决方案（React为例）

一、前言

对于这个需求的实现方式，历史上有很多版本。就让我们先讨论一下几种可能。

二、历史解决办法

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来控制字节流的长度和行数，且支持所有浏览器标准。

以下，是一个本篇主角

react-truncate

使用方法可以查看项目中的文档

全浏览器支持是肯定的，毕竟是js实现

不得不说的是 children 这个参数，它使我们使用的姿势丰富了很多

正常使用时：

import Truncate from 'react-truncate';

<Truncate width={
   200} lines={
   3}>
''
</Truncate>

渲染文本Node时的使用：

import Truncate from 'react-truncate';

<Truncate width={
   200} lines=