CSS超出两行省略...

最新推荐文章于 2024-11-25 15:31:27 发布

原创最新推荐文章于 2024-11-25 15:31:27 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #html

vue 专栏收录该内容

17 篇文章

订阅专栏

这段代码展示了如何使用CSS实现文本溢出隐藏并显示省略号，特别是对于多行文本的处理。通过`-webkit-line-clamp`和`line-clamp`属性限制显示的行数，配合`-webkit-box`和`-webkit-box-orient`来创建一个内联块级元素，从而达到多行文本溢出隐藏的效果。

以下代码：

 text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //设置行数
    line-clamp: 2;//设置行数
    -webkit-box-orient: vertical;