单行文字溢出省略号我们都知道怎么实现。.xxx{溢出：隐藏；文本溢出：省略号；white-space:nowrap;}那么多行文字怎么办，伟大的chrome走在了时代的前沿，可以通过属性-webkit-line-clamp来实现，这个属性已经被多年来，但其他浏览器仍然不支持它，叹息。.xxx{显示：-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}-webkit-line-clamp是行数，如果显示3行，设置3就够了。悲剧的是-webkit-line-clamp只有webkit内核支持，所以我们得想办法解决这个问题。纯css的完美实现就不展示了，只能优雅降级。可以使用下面的方案，将最大高度设置为n倍的Rowheight，然后就可以隐藏溢出的部分了。.xxx{行高：1.2；最大高度：2.4em；overflow:hidden;}这样做的好处是可以忽略文字的长度，即使文字很短也不会有问题。如果确定文字肯定是溢出了，也可以使用::after伪类来模拟...大致code.xxx{line-height:1.2;最大高度：2.4em；溢出：隐藏；位置：相对；}.xxx：在{内容：“...”之后；位置：绝对；底部：0；右：0；background-color:#fff;}考虑到文字不一定会溢出，所以推荐最终方案。xxx{行高：1.2；最大高度：2.4em；显示：-webkit-box；-webkit-line-clamp:2;-webkit-box-orient:vertical;溢出：隐藏；}转：https://fatesinger.com/100068
