前言

CSS 很早就有 build-in 方案 for 省略號 ellipsis 了. 但是隻能 1 line, 遇到多行的時候只能用 JS.

後來出了 line-clamp 終於把 multiple line ellipsis 解決了.

參考:

stackoverflow –Limit text length to n lines using CSS

Can I useline-clamp

Multi-Line Truncation with the New Line Clamp Plugin — What's new in Tailwind CSS

CSS-Tricks –line-clamp

ellipsis single line

一段 paragraph

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, reiciendis!
</p>

CSS Style

p {
  width: 300px; /* 限制寬度 */
  white-space: nowrap; /* 關閉自動換行 */
  overflow: hidden; /* 超出就隱藏 */
  text-overflow: ellipsis; /* 省略號 */
}

效果

特點:

1. 如果沒有 nowrap 寬度不夠的時候它會自動換行, 就不會有 overflow 了.

2. 如果沒有 overflow hidden 那省略號也不會出現了.

結論就是它是通過限制寬度 (width:300px) 和高度 (nowrap) 讓內容 overflow, 然後通過 hidden 配上 ellipsis 變成省略號的. 一套組合拳.

如果要 multiple line 就必須拿掉 nowrap 讓它自動換行, 然後通過另一個手法去限制高度. 這就是 line-clamp 做的事.

line-clamp