Text Overflow

Handle text overflow

Syntax

visual="[overflow-value]"

Values

Value	CSS Output	Description
truncate	overflow: hidden; text-overflow: ellipsis; white-space: nowrap	Truncate with ellipsis
text-ellipsis	text-overflow: ellipsis	Ellipsis overflow
text-clip	text-overflow: clip	Clip overflow

Examples

<div visual="truncate">Very long text that gets truncated...</div>

Preview

Text Overflow

visual="truncate" - Handle overflowing text

This long text will be truncated with ellipsis

This long text will be clipped without ellipsis

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:[150px]" visual="bg:primary text:white rounded:small truncate">This long text will be truncated with ellipsis</div>
  <div space="p:small w:[150px]" visual="bg:success text:white rounded:small text-clip">This long text will be clipped without ellipsis</div>
</div>