Typography
用於控制元素內文字換行方式的通用類別。
| Class | Styles |
|---|---|
text-wrap | text-wrap: wrap; |
text-nowrap | text-wrap: nowrap; |
text-balance | text-wrap: balance; |
text-pretty | text-wrap: pretty; |
使用 text-wrap 通用類別在文字的合理位置將溢出的文字換行至多行：
New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.
<article class="text-wrap"> <h3>Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>使用 text-nowrap 通用類別防止文字換行，必要時允許文字溢出：
New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.
<article class="text-nowrap"> <h3>Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>使用 text-balance 通用類別將文字均勻分配到每一行：
New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.
<article> <h3 class="text-balance">Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>基於效能考量，瀏覽器將文字平衡限制在約 6 行或更少的區塊，因此最適合用於標題。
使用 text-pretty 通用類別以犧牲效能來換取更好的文字換行和版面配置。其行為因瀏覽器而異，但通常包含防止文字區塊末端出現孤行（單獨一行只有一個字）等方式：
New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.
<article> <h3 class="text-pretty">Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>在 text-wrap 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<h1 class="text-pretty md:text-balance ..."> <!-- ... --></h1>在變體文件中了解更多關於使用變體的資訊。