Các tiện ích để kiểm soát cách văn bản xuống dòng trong một phần tử.
| Class | Styles |
|---|---|
text-wrap | text-wrap: wrap; |
text-nowrap | text-wrap: nowrap; |
text-balance | text-wrap: balance; |
text-pretty | text-wrap: pretty; |
Sử dụng tiện ích text-wrap để ngắt văn bản tràn xuống nhiều dòng tại các điểm hợp lý trong văn bản:
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>Sử dụng tiện ích text-nowrap để ngăn văn bản xuống dòng, cho phép nó tràn ra ngoài nếu cần thiết:
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>Sử dụng tiện ích text-balance để phân phối văn bản đều trên mỗi dòng:
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>Vì lý do hiệu suất, các trình duyệt giới hạn việc cân bằng văn bản trong các khối có khoảng 6 dòng trở xuống, làm cho nó phù hợp nhất cho các tiêu đề.
Sử dụng tiện ích text-pretty để ưu tiên bố cục và xuống dòng văn bản tốt hơn, chấp nhận giảm tốc độ. Hành vi thay đổi tùy theo trình duyệt nhưng thường bao gồm các phương pháp như ngăn chặn orphans (một từ đơn lẻ trên dòng riêng của nó) ở cuối khối văn bản:
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>Prefix a text-wrap utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<h1 class="text-pretty md:text-balance ..."> <!-- ... --></h1>Learn more about using variants in the variants documentation.