CSS：用 CSS 讓過多的文字自動隱藏

最近做的小作品中，遇到了需要限制文字數量的問題。因為文字顯示空間有限，不想因為文字過多而影響到排版，所以使用到了 CSS 中很好用也很簡單的方法，以下程式碼示範：

1. 先用 html 設定一個文字區塊：

<div class="box">
  <p class="text-area">大子清時對頭主的我天鄉眾接寫？外有你方然心馬。分頭中書初？怕天一的聲者院親野水大做字一現話似識熱次減案我海來子定當示該會……上底力！已人酒現：分最注大上工聯為環流裡站年、無參下前媽衣要怎兒！況常流能級比、子年線力。子族們神理角張修本常著是情向什自好那？</p>
</div>

2. 用 CSS 做基本的排版

.box {
width: 300px;
padding: 10px;
border: blue 2px solid;
}

結果如下：

這時候只要加入以下 CSS ，就可以限制文字數量：

.text-area {
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

結果如下：

除了限制文字數量，也加上了”…”。

CSS 的第一行 overflow:hidden;，可以自動隱藏超出範圍的文字或圖片；第二行 white-space: nowrap; 可以規定段落中的文字不進行換行；最後加上 text-overflow: ellipsis; 就可以達到圖片中的效果。