CSS实现多行文本溢出以省略号代替

最新推荐文章于 2025-03-24 00:47:58 发布

WLJIAO

最新推荐文章于 2025-03-24 00:47:58 发布

阅读量195

点赞数

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/qq_43467284/article/details/121135175

版权

本文介绍如何使用CSS实现多行文本溢出时以省略号替代的技巧。通过设置display、overflow、text-overflow等属性，并结合-webkit-line-clamp属性控制显示行数，实现优雅的文本截断效果。

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

CSS实现多行文本溢出以省略号代替

display: -webkit-box;// 将对象作为弹性伸缩盒子模型显示。
overflow: hidden;// 超出的文本隐藏
white-space: normal !important;// 溢出不换行(white-space: nowrap;)
text-overflow: ellipsis;// 溢出用省略号显示
word-wrap: break-word;//用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象
-webkit-line-clamp: 3;// 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
-webkit-box-orient: vertical;// 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）