設計網頁版面的時候常常需要節省版面空間，所以把一些文字設計成只顯示幾個字，最後再加上省略記號(三個點)”…”。
其實這個功能不需要用到很複雜的程式碼，只需要用一行css就可以囉~
 
這一篇要介紹的是text-overflow: ellipsis; 屬性。
先製作一個文字框：
HTML

<div class="box">
  <p class="ellipsis">無所不架JA.anything是設計相關小型工作室，製作項目包含網頁設計、app製作、網路遊戲、影音特效剪輯等。</p>
</div>

CSS

.box {
width: 300px;
padding: 10px;
border: #4caf50 2px solid;
}

這時候會得到的結果是：

接下來只要再加入一段css就可以

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

這時候就會看到文字省略的結果：

 
上面的css有用到white-space: nowrap;的屬性，這個屬性是針對單一行文字的時候使用才會有效果的，如果是想要讓文字顯示多行(multiple lines)再省略的話，要再加上一段css

.ellipsis {
display: -webkit-box;
-webkit-line-clamp: 2; //行數
-webkit-box-orient: vertical;
white-space: normal;
}

這時候就會得到多行的結果：


 
下面再貼一次完整的html+css程式碼：
HTML

<div class="box">
  <p class="ellipsis">無所不架JA.anything是設計相關小型工作室，製作項目包含網頁設計、app製作、網路遊戲、影音特效剪輯等。</p>
</div>

CSS

.box {
width: 300px;
padding: 10px;
border: #4caf50 2px solid;
}
.ellipsis {
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
}