句子過長，使用刪節號顯示

CSS, TBD
  1. 1. 單行
  2. 2. 多行
  3. 3. 參考資料

單行

1
2
3
4
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

主要就是 text-overflow: ellipsis;，其他只是要營造出句子過長的情況。

多行

1
2
3
4
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

但好像並不是所有瀏覽器都適用，所以如果 CSS 不能解決，也可以用 JS 去做計算做到一樣的效果。

Demo

參考資料

CSS顯示指定行數文本、限制文本最大行數