text-overflow 是一个很常用的 CSS 属性,该属性设置截断的文本溢出内容如何显示。
属性值
clip
(默认值)
在内容区域的极限处截断文本。因此在字符的中间可能会发生截断。
ellipsis
用一个省略号 ('…') 来表示被截断的文本。这个省略号被添加在内容区域中,因此会减少显示的文本。如果空间太小到连省略号都容纳不下,那么这个省略号也会被截断。
生效条件
1. 有溢出
text-overflow 属性并不会强制溢出事件的发生,文本过长时有可能会自动换行,导致根本不会触发 text-overflow 属性上的设置。
因此,需要手动设置 white-space: nowrap
使文本不换行,以确保文本过长时会有溢出。
2. 溢出部分隐藏
对于溢出部分的文本,需要设置overflow: hidden
来隐藏,从而触发 text-overflow 属性的截断效果。
一般情况下,我们结合这两个条件来使用 text-overflow,就可满足大部分需求:
text-overflow: ellipsis或clip;
white-space: nowrap;
overflow: hidden;
特殊情况
在一些容器会根据内容自适应的布局中,容器宽高会随着文本内容的增加而撑大,文本便不会溢出。
这样一来,有溢出的生效条件被破坏了,导致 text-overflow 属性不会生效。
flex 容器
默认情况下,flex 元素不会缩短至小于内容框尺寸,除非给元素的 min-width、max-width 或 width 指定一个值。
在这样的情况下,即使文本内容非常长,内容框也会随之增大,文本自然达不到溢出条件。
因此,要解决 flex 中 text-overflow 属性不生效的问题,需要在 flex item 上设置:
min-width: 0;
table容器
table 容器默认列宽度由单元格内容自适应。同理,默认情况下 text-overflow 属性也不会生效。
我们可以通过固定列宽高的方式来解决这一问题:
table-layout:fixed;