Word Break

vel-src: typography.css

Utilities for controlling word breaks and overflow wrapping in text.

Class	Properties
vel-break-normal	overflow-wrap: normal; word-break: normal
vel-break-words	overflow-wrap: break-word
vel-break-all	word-break: break-all
vel-break-keep	word-break: keep-all

Examples

Break long words to prevent overflow

Thisisaverylongwordthatwouldhaveoverflowedthecontainerbutnowitbreaksproperly

example.html

<div class="vel-break-words" style="width:12rem;background:#0d1422;border:1px solid #1e2d45;border-radius:0.5rem;padding:1rem;color:#e2e8f0">
  Thisisaverylongwordthatwouldhaveoverflowedthecontainerbutnowitbreaksproperly
</div>

Break all characters (aggressive)

Break at any character boundary. Even mid-word if needed.

example.html

<div class="vel-break-all" style="width:12rem;background:#0d1422;border:1px solid #1e2d45;border-radius:0.5rem;padding:1rem;color:#e2e8f0">
  Break at any character boundary. Even mid-word if needed.
</div>

Normal word breaking (default)

Normal word breaking — only breaks at word boundaries.

example.html

<div class="vel-break-normal" style="width:12rem;background:#0d1422;border:1px solid #1e2d45;border-radius:0.5rem;padding:1rem;color:#e2e8f0;overflow:auto">
  Normal word breaking — only breaks at word boundaries.
</div>