Use d-ws-normal to collapse an element's text whitespaces sequences and newline characters are treated like whitespace. Lines are broken as needed to fill boxes.
<divclass="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-350"><pclass="d-ws-normal">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/>Blanditiisitaquequodpraesentium Dolores beatae nam at sed dolorum ratione dolorem nisi velit dolor.</p></div>
Use d-ws-nowrap to collapse an element's text whitespaces sequences, but line breaks are not honored. This keeps text from wrapping.
<divclass="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-350"><pclass="d-ws-nowrap d-of-hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/>Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit dolor.</p></div>
Use d-ws-pre to preserve an element's whitespaces sequences. Lines are only broken at new line characters and <br/> elements.
<divclass="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-350"><pclass="d-ws-pre d-of-hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/> Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit dolor.</p></div>
Use d-ws-pre-line to collapse an element's whitespaces sequences. Lines are broken at new line characters, <br/> elements, or as needed to fill boxes.
<divclass="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-350"><pclass="d-ws-pre-line d-of-hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/>Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit dolor.</p></div>
Use d-ws-pre-wrap to preserve an element's whitespaces sequences. Lines are broken at new line characters, <br/> elements, or as needed to fill boxes.
<divclass="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-350"><pclass="d-ws-pre-wrap d-of-hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/> Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit dolor.</p></div>
Use d-ws-break-spaces to have an element act like pre-wrap except that any sequence of preserved whitespace always takes up space, a line breaking opportunity exists after every preserved whitespace character, and preserved spaces take up space and do not hang which affects the element's intrinisic size (min-content and max-content sizes).
<divclass="d-bgc-moderate d-py-100 d-px-200 d-bar-400 d-w-350"><pclass="d-ws-break-spaces d-of-hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/>Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit dolor.</p></div>