text-overflow 的使用

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 上设置：

table容器

table 容器默认列宽度由单元格内容自适应。同理，默认情况下 text-overflow 属性也不会生效。

我们可以通过固定列宽高的方式来解决这一问题：

附：文本换行总结

CSS：空白与换行的处理