乐闻世界logo
搜索文章和话题
如何使用 CSS 处理文字溢出省略号

如何使用 CSS 处理文字溢出省略号

乐闻的头像
乐闻

2021年12月19日 10:36· 阅读 747

text-overflow: ellipsis; 是一种 CSS 属性, 主要用于处理单行或者多行文本内容超出其显示区域时的情况。

当文本内容过长,超出其容器布局的宽度时,我们通常不希望文本直接溢出显示,而是希望通过更优雅的方式来处理。这时我们就可以使用 text-overflow: ellipsis; 这个属性来让溢出的文本显示为"...”。

具体如何使用呢?

CSS代码如下:

css
.my-element { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.my-element 是你要应用文本溢出省略的元素的类名。这段代码的含义是:

  1. white-space: nowrap; 属性保证文本内容不会换行,而是呈现在同一行。
  2. overflow: hidden; 这个属性会确保超出容器的部分被隐藏。
  3. text-overflow: ellipsis; 这个属性表示如果文本内容溢出,就显示为 "..."。

需要注意的是,text-overflow: ellipsis; 默认只支持单行文本的溢出显示。对于多行文本溢出显示,需要借助其他属性或者一些hack方法,例如 '-webkit-line-clamp' 等。

对于多行文本使用 'text-overflow: ellipsis;' 的 CSS 如下:

css
.my-element{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

这样设置后,.my-element 中的内容如果超过两行,那么多出的文本将会被隐藏,并且以 "..." 显示。

标签: