超简单css单行或多行文本溢出显示省略号

原创已于 2023-07-21 11:51:39 修改 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2023-07-20 16:34:39 首次发布

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用CSS来处理文本溢出的问题，对于单行文本，可以通过`overflow:hidden`，`text-overflow:ellipsis`和`white-space:nowrap`来实现省略号效果。而对于多行文本，可以结合`word-break:break-all`，`-webkit-line-clamp`和弹性盒子模型来限制显示的行数并添加省略号。

一、css 单行文字溢出显示省略号

注意：如果不生效，给盒子设置宽度；以下是css样式

overflow: hidden;//溢出隐藏
text-overflow: ellipsis;//省略号
white-space: nowrap;//强制文本不换行

二、css多行文本溢出显示省略号

word-break: break-all;//单词内的断句
overflow: hidden;//溢出隐藏
text-overflow: ellipsis;//省略号
display: -webkit-box;//将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical;//设置弹性盒子的子元素的排列方式
-webkit-line-clamp: 2;//设置显示文本的行数