Whitespace

vel-src: typography.css

Utilities for controlling an element's white-space property.

Class	Properties
vel-whitespace-normal	white-space: normal
vel-whitespace-nowrap	white-space: nowrap
vel-whitespace-pre	white-space: pre
vel-whitespace-pre-line	white-space: pre-line
vel-whitespace-pre-wrap	white-space: pre-wrap
vel-whitespace-break-spaces	white-space: break-spaces

Examples

Whitespace wrapping

vel-whitespace-normal

Text wraps normally across multiple lines

vel-whitespace-nowrap

Text stays on one line and clips

example.html

<div class="vel-grid vel-grid-cols-2 vel-gap-4">
  <div>
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-whitespace-normal</p>
    <div class="vel-whitespace-normal" style="background:#1a2236;border:1px solid #1e2d45;border-radius:6px;padding:10px;font-size:12px;color:#94a3b8;width:150px">Text wraps normally across multiple lines</div>
  </div>
  <div>
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-whitespace-nowrap</p>
    <div class="vel-whitespace-nowrap vel-overflow-hidden" style="background:#1a2236;border:1px solid #1e2d45;border-radius:6px;padding:10px;font-size:12px;color:#94a3b8;width:150px">Text stays on one line and clips</div>
  </div>
</div>