Utilities for controlling an element's text overflow.
Use d-truncate to truncate an element's text to a single line with an ellipsis (...) if needed. Note that while CSS Utilities are fundamentally a single CSS property, this utility combines three: overflow, text-overflow, and white-space to achieve the effect.
<div class="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-500"> <p class="d-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit dolor.</p> </div>
Use d-to-ellipsis, combined with d-of-hidden to truncate an element's overflowing text with an ellipsis (...) if needed.
<div class="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-500"> <p class="d-of-hidden d-to-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit dolor.</p> </div>
Use d-to-clip to clip an element's overflowing text if needed.
<div class="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-500"> <p class="d-of-hidden d-to-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit dolor.</p> </div>
Class
|
Output
|
|---|---|
| .d-truncate |
overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; |
| .d-to-ellipsis | text-overflow: ellipsis !important; |
| .d-to-clip | text-overflow: clip !important; |
| .d-to-unset | text-overflow: unset !important; |
Text Overflow documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope