CSS实现文本“无限行”截断

标题的规则是省略2行以上。这个很简单，直接用-webkit-line-clamp.title{overflow:hidden;就可以实现了显示：-webkit-box；-webkit-line-clamp:2;-webkit-box-orient:vertical;}如果超过2行，会自动省略。2、内容自适应行数是固定的，因为整个高度是固定的。如果content部分自适应剩余空间，会实现吗？说到自适应剩余空间，大家马上就会想到flex布局，那么可以这样实现：.section{display:flex;溢出：隐藏；height:72px;/*设置高度*/flex-direction:column;}.excerpt{flex:1;/*自适应剩余空间*/overflow:hidden;}这样，借助flex:1;overflow:hidden;，差不多就达到了想要的效果。下面就完美了，不过现在没有省略号了，再往下看3.不定行超出一般情况，-webkit-line-clamp适用于行数固定的情况。现在行数不定，有时是1行，有时是2行，怎么处理？这里需要一些技巧。大家可能还记得这篇CSS实现“展开和折叠”多行文字的文章，其中提到了如何使用浮动来实现文字超出和省略的效果。有兴趣的可以参考一下。1、右下角的环绕效果，先添加一个伪元素，设置右边的float.excerpt::before{content:'...';float:right;}很明显，省略号当前在右上角，现在需要移动到右下角来吧，之前的操作是通过一个浮动元素将省略号向下挤压，但是多了一个占位符需要元素。这是在CSS形状布局的帮助下实现它的新方法！首先，填充省略号的高度并在底部对齐，可以用flex实现。摘录::之前{内容：'...';浮动：对；高度：100%；显示：弹性；也挤掉了一部分，达不到包裹的效果。这时候，你可以使用形状来布局。如果你不知道这个布局，可以参考张鑫旭的这篇文章：为自己写的CSSshapes布局教程?张鑫旭-鑫空间-鑫生活(zhangxinxu.com)这里你只需要使用shape就够了-outside:inset()，表示以自身为边界在上、右、下、左四个方向向内缩进的距离。比如需要缩进靠近省略号，所以.excerpt::before{/*otherstyles**/shape-outside:inset(calc(100%-1.5em)00);}效果如下如下去除背景，可以看到直到省略号完美包围右下角2.自动隐藏省略号现在还有一个问题，当文字需要少一点的时候，隐藏省略号，如何实现呢？你可以试试“CSS蒙眼法”。简单的说，就是用足够大的色块来覆盖省略号。设置绝对定位后，色块跟随内容文字，所以当文字较多时，色块也跟随文字。,实现如下.excerpt::after{content:'';添加一些东西，比如box-shadow，稍微往左下角移动一点就可以了。摘录::之后{内容：'';位置：绝对；宽度：999vh；身高：999vh；背景：#fff；盒子阴影：-2em2em#fff；/*左下阴影*/}设置与背景色相同的颜色后，最终效果如下。这样就实现了文章开头的交互效果。完整代码可以通过auto-clamp获取（codepen.io）4.总结与说明上面实现了一个不定行数的文本截断效果，其中融合了很多CSStricks。除了shapes布局（当然也可以用其他方式实现），没有太多奇怪的属性。下面简单总结一下，看一下：省略多行，直接使用-webkit-line-clamp。现代浏览器支持flex布局，可以轻松处理剩余空间。float+shapes布局也可以实现右下角的环绕效果。Box-shadow在眼罩中很常见。CSStricks和tricks有时能帮上大忙在我看来，布局当然最好用C??SS来解决，它更灵活，渲染速度更快，没有框架限制，不需要等待dom加载，不需要计算JS的大小，不需要遍历节点有很多好处。如果您觉得还不错，如果对您有帮助，请点赞，收藏，转发???