Text Wrap

Control text wrapping

Syntax

visual="[wrap-value]"

Values

Value	CSS Output	Description
text-wrap	text-wrap: wrap	Wrap text
text-nowrap	text-wrap: nowrap	No wrap
text-balance	text-wrap: balance	Balanced wrap
text-pretty	text-wrap: pretty	Pretty wrap

Examples

<h1 visual="text-balance">Balanced heading</h1>

Preview

Text Wrap

visual="text-balance" - Control line wrapping

This text will wrap normally when needed

This text won't wrap at all

This heading text is balanced

View Code

<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small w:[200px]" visual="bg:primary text:white rounded:small text-wrap">This text will wrap normally when needed</div>
  <div space="p:small w:[200px]" visual="bg:success text:white rounded:small text-nowrap">This text won't wrap at all</div>
  <div space="p:small w:[200px]" visual="bg:warning text:black rounded:small text-balance">This heading text is balanced</div>
</div>