CSS 讓文字有 ... 的效果

需求不大的話利用它少寫一點 JavaScript。

不會滿出來囉

備註：這只適用於單行文字，如果要多行文字請改用 JavaScript 來處理，或也可以參考 CSS 多行文字顯示 … 的效果

HTML：

<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Totam minus ea laudantium, corporis minima reprehenderit quis voluptatum
</div>

CSS：

.box {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

解釋一下為什麼要同時設定這三個屬性：

• white-space: nowrap => 讓文字只會有一行
• overflow: hidden => 讓超出的 box 的範圍隱藏起來
• text-overflow: ellipsis => 讓被隱藏的文字顯示「…」

就這麼簡單囉。