[分享]css两行自动裁剪

CSS中的两行自动裁剪是一种常用于文本溢出的技巧。它可以使文本在超出几行后以省略号代替。下面我们来看一下具体的实现方式。/在需要裁剪的元素上添加如下样式/ overflow: hidden; /超出部...

CSS中的两行自动裁剪是一种常用于文本溢出的技巧。它可以使文本在超出几行后以省略号代替。下面我们来看一下具体的实现方式。

/*在需要裁剪的元素上添加如下样式*/
overflow: hidden; /*超出部分隐藏*/
text-overflow: ellipsis; /*以省略号代替*/
display: -webkit-box; /*将元素变成单行文本*/
-webkit-box-orient: vertical; /*设置为垂直排布*/
-webkit-line-clamp: 2; /*限制显示两行, 可根据需求调整*/

以上代码中, -webkit-box 和 -webkit-box-orient 的作用是使元素成为单行文本并以垂直方式排布。-webkit-line-clamp 则用于限制显示的行数。在不同浏览器中可能存在差异，可以根据需要添加其他浏览器前缀。

需要注意的是，该技巧只适用于单行文本。如果需要裁剪的文本超过一行，需要使用 js 或其他技巧实现。