文字換行

文字換行

控制元素內文字如何換行的工具類別。

類別樣式

文字換行

text-wrap: wrap;

text-nowrap

text-wrap: nowrap;

text-balance

text-wrap: balance;

text-pretty

text-wrap: pretty;

範例

使用 text-wrap 工具類別，將溢出的文字在文字中的邏輯點換行到多行

深受喜愛的曼哈頓湯品攤位關閉

紐約人今年冬天面臨寒意時，感到少了溫暖，因為該市最受尊敬的湯品攤位在經歷了一連串讓社區感到困惑的事件後，意外關閉了。

<article class="text-wrap">  <h3>Beloved Manhattan soup stand closes</h3>  <p>New Yorkers are facing the winter chill...</p></article>

使用 text-nowrap 工具類別來防止文字換行，允許它在必要時溢出

深受喜愛的曼哈頓湯品攤位關閉

紐約人今年冬天面臨寒意時，感到少了溫暖，因為該市最受尊敬的湯品攤位在經歷了一連串讓社區感到困惑的事件後，意外關閉了。

<article class="text-nowrap">  <h3>Beloved Manhattan soup stand closes</h3>  <p>New Yorkers are facing the winter chill...</p></article>

使用 text-balance 工具類別，將文字均勻分佈在每一行

深受喜愛的曼哈頓湯品攤位關閉

紐約人今年冬天面臨寒意時，感到少了溫暖，因為該市最受尊敬的湯品攤位在經歷了一連串讓社區感到困惑的事件後，意外關閉了。

<article>  <h3 class="text-balance">Beloved Manhattan soup stand closes</h3>  <p>New Yorkers are facing the winter chill...</p></article>

由於效能原因，瀏覽器會將文字平衡限制為約 6 行或更少的區塊，使其最適合用於標題。

使用 text-pretty 工具類別，防止在文字區塊末尾出現孤行（單獨一行的一個單字）

深受喜愛的曼哈頓湯品攤位關閉

紐約人今年冬天面臨寒意時，感到少了溫暖，因為該市最受尊敬的湯品攤位在經歷了一連串讓社區感到困惑的事件後，意外關閉了。

<article>  <h3 class="text-pretty">Beloved Manhattan soup stand closes</h3>  <p>New Yorkers are facing the winter chill...</p></article>

前綴a text-wrap 工具類別使用像 md: 這樣的斷點變體，僅在中等螢幕尺寸以上時套用工具類別

<h1 class="text-pretty md:text-balance ...">  <!-- ... --></h1>

在變體文件中了解更多關於使用變體的資訊。