纯CSS控制文本省略号（单行&&多行）还有关于换行的

最新推荐文章于 2024-05-07 17:02:14 发布

SkipCode

最新推荐文章于 2024-05-07 17:02:14 发布

阅读量271

点赞数

文章标签： css

SkipCode

本文链接：https://blog.youkuaiyun.com/qq_41848496/article/details/107201538

版权

本文介绍如何使用CSS实现单行或多行文本溢出时显示省略号的效果，解决后台获取换行文段显示问题。通过设置white-space、overflow、text-overflow等属性，配合-webkit-line-clamp实现跨行文本截断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码


//控制单行省略号
white-space: nowrap; 
overflow: hidden; 
text-overflow:ellipsis;


//控制多行省略号
overflow: hidden; 
text-overflow: ellipsis; 
display: box; 
display:-webkit-box;
-webkit-line-clamp: 2; //控制显示多少行，注意盒子高度
-webkit-box-orient: vertical;

//很多时候我们在后台拿到一串文段，拿到手是有换行的，但是显示出来却没有换行，那么就试试看加上这个样式
white-space: pre-wrap;