Whitespace

Control whitespace handling

Syntax

visual="whitespace:[value]"

Values

Value	CSS Output	Description
normal	white-space: normal	Normal whitespace
nowrap	white-space: nowrap	No wrap
pre	white-space: pre	Preserve whitespace
pre-line	white-space: pre-line	Pre-line
pre-wrap	white-space: pre-wrap	Pre-wrap
break-spaces	white-space: break-spaces	Break spaces

Examples

<pre visual="whitespace:pre">Preserved whitespace</pre>

Preview

Whitespace

visual="whitespace:pre" - Control whitespace handling

Normal spaces collapse

This text won't wrap to next line

Preserved spaces here

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" visual="bg:primary text:white rounded:small whitespace:normal">Normal   spaces   collapse</div>
  <div space="p:small" visual="bg:success text:white rounded:small whitespace:nowrap">This text won't wrap to next line</div>
  <div space="p:small" visual="bg:warning text:black rounded:small whitespace:pre">Preserved   spaces   here</div>
</div>