指定元素中文本展示行数

在开发中经常会有这样的需求，指定元素特定行数

e.g.比如希望div中固定展示两行，超出的部分用...展示

可以考虑使用-webkit-box布局、然后使用-webkit-line-clamp来指定展示的行数

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-clamp  

 

如果不使用box布局呢？

那就需要计算 line-height 和 height 来限制显示行数：

• 设置 line-height。
• 设置 max-height = line-height × 行数。
• 使用 ::after 伪元素定位在右下角，放置“...”并背景遮盖。

这样还是挺麻烦的