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.
<divclass="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-500"><pclass="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.
<divclass="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-500"><pclass="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.
<divclass="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-500"><pclass="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>