如果你正在开发的应用程序有用户生成的内容（如博客文章、评论等），可能会有这样的情况：它太长了，无法显示，截断它们并在下面放一个 "多读 "按钮是有意义的。
这篇文章将只关注前端，网络浏览器将检测文本是否需要被截断，并根据需要只显示多读/少读。(如果文本足够短，就不要显示 "阅读更多"）。
使用这些CSS属性的组合，我们可以截断文本（例如，如果文本长于4行，就不显示 "阅读全文"）。
...
)到我们想要的行数：
.line-clamp-4 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
/* truncate to 4 lines */
-webkit-line-clamp: 4;
}
如果文本长于4行，它将被截断并以**"... "结尾。**如果文本短于4行，则不做任何修改：
现在我们成功地截断了文本，下一步是检查文本是否被截断，正如你所看到的，上面的短文本（第二段）没有被截断，即使我们为它设置了webkit-line-clamp 。
我们要检查文本是否真的被截断，这样我们就可以为它显示 "阅读更多 "按钮（对于没有被截断的短文，我们不需要显示阅读更多）。
我们可以用HTML元素的两个属性来检查文本是否被截断，即offsetHeight和scrollHeight。来自Mozilla开发文档。
offsetHeight:
是元素的CSS高度的测量值，包括任何边框、填充和水平滚动条（如果呈现）。
scrollHeight:
等于该元素所需的最小高度，以便在不使用垂直滚动条的情况下将所有的内容放入视口。
下面是StackOverflow关于什么是offsetHeight和scrollHeight的一个好答案。以下是可视化的总结。
scrollHeight是可滚动内容的总高度，offsetHeight是屏幕上的可见高度。对于一个溢出的视图，scrollHeight要比offsetHeight大。
我们可以推断，如果scrollHeight大于offsetHeight，那么该元素就会被截断。
下面是检查一个元素是否被截断的javascript代码：
var element = document.querySelector('p');
if (element.offsetHeight < element.scrollHeight ||
element.offsetWidth < element.scrollWidth) {
// your element has overflow and truncated
// show read more / read less button
} else {
// your element doesn't overflow (not truncated)
}
这段代码应该在段落元素在屏幕上呈现后运行，你可以把它放在一个
