Control text wrapping, line breaking, and truncation

Adjust how text wraps, breaks, and truncates to improve site responsiveness and readability.

By default, line breaks in text only occur in certain places, like when there is a space or hyphen. This can cause design and layout issues for long strings or sequences of characters (e.g., URLs) that don’t fit into their parent element. 

With the word break, line break, and overflow wrap properties, you can control how your text is broken and wrapped within elements. This improves readability across different device sizes and orientations and ensures that text wraps correctly based on language-specific requirements, which allows for seamless multilingual support on your site. 

How word breaking works

The word breaking setting adjusts the word-break CSS property, allowing you to control whether line breaks occur where the text would otherwise overflow its content box. Use word breaking to avoid awkward line breaks in content with compound words, or to follow to language-specific rules for a better international user experience.

The word breaking options are:

• Normal (default value) — breaks can occur at spaces or hyphens, and between CJK characters
• Break all — breaks can occur between any character, including CJK, to prevent overflow
• Keep all — same as Normal, except that CJK characters are never broken, even if there's overflow

How to set word breaks

You can add word breaks to a parent element or breakpoint and override it on child elements or on lower or higher breakpoint.

To set word breaks: 

1. Select a text element on the canvas (e.g., rich text or paragraph)
2. Go to Style panel > Typography > More type options > Breaking
3. Select a word break option from the Word dropdown (i.e., Normal, Break all, or Keep all) 

How line breaking works

The line breaking setting adjusts the white-space CSS property, allowing you to control how whitespace characters (i.e., characters that represent horizontal or vertical space between other characters) and newline characters (i.e., whitespace characters that represent a line break) are handled, and whether text wraps or overflows. 

The line breaking options are:

• Normal (default value) — collapses sequences of whitespace (i.e., compresses sequences of multiple whitespace characters down to a single space character) and wraps text to the next line as needed
• No wrap — collapses sequences of whitespace, but keeps text on a single line without wrapping, even if the text overflows
• Pre — preserves sequences of whitespace and line breaks and keeps text exactly as it appears in the HTML source code
• Pre wrap — preserves sequences of whitespace and allows text to wrap to the next line as needed
• Pre line — collapses sequences of whitespace, preserves line breaks, and allows text to wrap to the next line as needed
• Spaces — preserves sequences of whitespace, allows text to wrap at any point, and doesn’t remove trailing spaces 

How to set line breaks

You can add word breaks to a parent element or breakpoint and override it on child elements or on lower or higher breakpoint.

To set line breaks: 

1. Select the text element on the canvas (e.g., rich text or paragraph)
2. Go to Style panel > Typography > More type options > Breaking
3. Select a line break option from the Line dropdown (i.e., Normal, No wrap, Pre, Pre wrap, Pre line, or Spaces) 

How text wrapping works

The wrapping setting adjusts the overflow-wrap CSS property, allowing you to control how words wrap when they exceed the width of their parent element. This ensures that words break at the nearest opportunity within the container, maintaining the integrity and aesthetic of your design. 

The text wrapping options are:

• Normal (default value) — breaks occur at spaces between words or hyphens (i.e., long words won't break)
• Anywhere — an otherwise unbreakable string of characters (e.g., a URL or a long word) may be broken at any point if there are no otherwise acceptable break points in the line
• Break word — similar to Anywhere, an otherwise unbreakable string of characters may be broken, but only when necessary to prevent overflow

How to set wrapping behavior

You can add wrapping to a parent element or breakpoint and override it on child elements or lower or higher breakpoints.

To set wrapping behavior:

1. Select the text element on the canvas (e.g., rich text or paragraph)
2. Go to Style panel > Typography > More type options > Wrap
3. Select a wrap option (i.e., Normal, Anywhere, or Break word)

How truncate works

The truncate setting controls how overflow text displays when overflow is set to hidden and line breaking is set to No wrap.

The truncate options are:

• Clip — the overflow text is clipped (i.e., cuts off)
• Ellipsis — an ellipsis (…) appears just before the overflow text is clipped

How to set truncate behavior

To set truncation behavior:

1. Select the text element on the canvas (e.g., rich text or paragraph)
2. Go to Style panel > Typography > More type options > Truncate
3. Select a truncation option (i.e., Clip or Ellipsis)

FAQ

What’s the difference between word breaking and line breaking? 

Both word breaking and line breaking affect how text is displayed on the page. Line breaking controls how whitespace characters are handled, and whether text wraps or overflows. Word breaking handles how words are broken and wrapped within the text. Word breaks are especially useful for URLs or languages with particular word segmentation rules (e.g., Chinese, Japanese, and Korean). 

Why isn’t “break-word” an option for word breaking? 

According to the CSS spec, “word-break: break-word” is deprecated in favor of “overflow-wrap: break-word.” You can use “break-word” for wrapping.