Word Break

Control word breaking

Syntax

visual="[break-value]"

Values

Value	CSS Output	Description
break-normal	overflow-wrap: normal; word-break: normal	Normal break
break-words	overflow-wrap: break-word	Break words
break-all	word-break: break-all	Break all
break-keep	word-break: keep-all	Keep all

Examples

<div visual="break-words">Long words break properly</div>

Preview

Word Break

visual="break-words" - Control word breaking

Supercalifragilisticexpialidocious

Supercalifragilisticexpialidocious

Supercalifragilisticexpialidocious

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:[120px]" visual="bg:primary text:white rounded:small break-normal">Supercalifragilisticexpialidocious</div>
  <div space="p:small w:[120px]" visual="bg:success text:white rounded:small break-words">Supercalifragilisticexpialidocious</div>
  <div space="p:small w:[120px]" visual="bg:warning text:black rounded:small break-all">Supercalifragilisticexpialidocious</div>
</div>