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：空白與換行的處理