Utilities for controlling how text wraps within an element.
Use d-tw-nowrap to prevent text from wrapping.
<div class="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-500 d-of-hidden"> <p class="d-tw-nowrap">Lorem ipsum dolor sit amet consectetur gemini.</p> </div>
Use d-tw-wrap to allow text to wrap normally at soft wrap opportunities.
<div class="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-500"> <p class="d-tw-wrap">Lorem ipsum dolor sit amet consectetur gemini.</p> </div>
Use d-tw-balance to balance the length of each line of text, distributing content more evenly across lines.
<div class="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-500"> <p class="d-tw-balance">Lorem ipsum dolor sit amet consectetur gemini.</p> </div>
Use d-tw-pretty to optimize text wrapping for better typography, avoiding orphaned words on the last line.
<div class="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-500"> <p class="d-tw-pretty">Lorem ipsum dolor sit amet consectetur gemini.</p> </div>
Use d-tw-unset to reset the text wrap property to its default value.
<div class="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-500"> <p class="d-tw-unset">Lorem ipsum dolor sit amet consectetur gemini.</p> </div>
Class
|
Output
|
|---|---|
d-tw-unset | text-wrap: unset !important; |
d-tw-balance | text-wrap: balance !important; |
d-tw-nowrap | text-wrap: nowrap !important; |
d-tw-pretty | text-wrap: pretty !important; |
d-tw-wrap | text-wrap: wrap !important; |
Text Wrap documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope