Docs / Whitespace
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
<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>