css文本溢出显示

单行文本溢出显示省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

 

单行文本溢出显示省略号

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
hyphens: auto;

-webkit-line-clamp设置显示的行数

 

注意:如果设置了显示2行,但是能看到一点点第3行或者第4行文字,是因为元素设置了内间距。此时设置外间距或者取消内间距并且在父元素设置内间距就可以了。

 

posted @ 2022-09-02 14:42  丿流水  阅读(491)  评论(0)    收藏  举报