文字截斷

類別

兩種形式都需要受限的寬度。在 Flex 或 Grid 項目內，請為該項目設定 min-w(0)，讓它能夠縮小。

限制可見文字，同時保留閱讀全文的方式

truncate 結合隱藏溢位、刪節號與不換行設定。它需要具有有限行內寬度的區塊容器，才會產生溢位；套用在寬度未受限的行內 span 上，不會形成單行預覽。

字型、寬度與文字都相同，只改變截斷 class。刪節號由瀏覽器原生繪製，每個元素仍保有完整字串。

文字說明

1. 每份文字寬 192px，字型大小 14px，行高 24px。
2. 第一份文字自由換行，並增高以容納所有行。truncate 讓第二份維持一行，並以刪節號隱藏溢位。
3. clamp-lines(2) 讓第三份文字換行，再透過帶前綴的 line-clamp 組合，將可見內容限制為兩行。
4. 三個元素都包含相同的完整字串。讀者需要閱讀完整的可見文字時，必須另外提供展開控制項或連結。

clamp-lines(2) 使用帶前綴的 line-clamp 組合：display: -webkit-box、垂直盒模型方向、兩行限制與隱藏溢位。行數必須是正整數。這種形式允許換行，因此不要與 truncate 及其 white-space: nowrap 合併使用。

文字仍保留在 DOM 中。裁切只是視覺限制，不會縮短字串，也不是展開內容的機制。請透過真正的連結或可展開的全文檢視，保留重要資訊的存取方式；不要只依賴滑鼠停留時才顯示的 title。

Flex 或 Grid 項目的自動最小尺寸可能使它比可用空間更寬。請在需要縮小的項目上設定 min-w(0)，再限制其內部文字。使用多行截斷時，請將 padding 放在外層容器，避免內距讓已裁切的行露出來。

這個組合樣式會設定自己的 display 與 overflow 宣告。用 flex、grid 或可見溢位覆寫它們，可能破壞行數限制。需要自訂截斷規則時，請明確使用原生屬性。

另見 原生文字溢位與舊式多行截斷.

用法

讓檔名維持一行、摘要限制為兩行，並可展開詳細內容閱讀兩者的全文。

<article class="… max-w-3xs">  <p class="… truncate">field-notes-autumn-collection-final-v03.fig</p>  <p class="… clamp-lines(2)">Good interfaces make space for…</p>  <details><summary>Read full details</summary><p>field-notes-autumn-collection-final-v03.fig</p><p>Good interfaces make space for…</p></details></article>

@layer theme {  :root,  :host {    --container-3xs: 16rem  }}@layer utilities {  .clamp-lines\(2\) {    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 2;    overflow: hidden;    overflow-wrap: break-word;    text-overflow: ellipsis  }  .truncate {    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap  }  .max-w-3xs {    max-width: var(--container-3xs)  }}

自訂

預設集使用 @utility 定義這些類別。在你的樣式表中定義相同名稱，即可取代原本的定義。

@utility truncate {  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}@utility clamp-lines(--n <integer>) {  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: var(--n);  overflow: hidden;  overflow-wrap: break-word;  text-overflow: ellipsis;}

另見 utility 定義與文字排版.