Control text wrapping and line breaking

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. 

In this lesson, you’ll learn: 

1. How to use word breaking
2. How to use line breaking
3. How to use text wrapping
4. FAQ

How to use word breaking

With word breaking (the “word-break” CSS property), you can change the default line breaking behavior and specify where line breaks appear in text that would otherwise overflow. You can use word breaks to avoid awkward line breaks for content with compound words, or to adhere to language-specific rules and ensure a proper display for a better international user experience. 

There are 3 options for word breaking: 

• Normal — default value which uses the default rules for word breaking (i.e., breaking at spaces or hyphens)
• Break all — to prevent overflow, any word or character can break onto the next line (excluding Chinese/Japanese/Korean text)
• Keep all — for Chinese, Japanese, and Korean (CJK) text, words are not broken even if there is content overflow. Non-CJK text behavior is the same as Normal 

Pro tip: You can learn more about the word-break property and preview these options in the MDN web docs.

How to set word breaks

Before you can set word breaks, you’ll need to add a text element (e.g., rich text, paragraph, etc.) to the canvas. 

To set word breaks: 

1. Select the text element on the canvas
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) 

As with other style properties, you can add word breaks to a parent element or breakpoint and override it on child elements or on lower or higher breakpoints. 

Important: If you have custom word-break CSS on your site, be sure to remove this to avoid unexpected behavior on your published site. 

How to use line breaking

Line breaking in Webflow (known as the “white-space” property in CSS) controls how whitespace characters (i.e., characters which represent horizontal or vertical space between other characters) and newline characters (i.e., whitespace characters which represent a line break) are handled, and whether text wraps or overflows. 

There are 6 options for line breaking: 

• Normal — default value which 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 the same as Normal, 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 white space (i.e., compresses sequences of multiple whitespace characters down to a single space character), 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 as needed, and doesn’t remove trailing spaces 

Pro tip: You can learn more about the white-space property and preview these options in the MDN web docs.

How to set line breaks 

Before you can set line breaks, you’ll need to add a text element (e.g., rich text, paragraph, etc.) to the canvas. 

To set line breaks: 

1. Select the text element on the canvas
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) 

As with other style properties, you can add line breaks to a parent element or breakpoint and override it on child elements or lower or higher breakpoints. 

Important: If you have custom white-space CSS on your site, be sure to remove this to avoid unexpected behavior on your published site. 

How to use text wrapping

Wrapping (the “overflow-wrap” CSS property) lets you 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. 

There are 3 options for wrapping: 

• Normal — default value which uses the default rules for breaking (i.e., breaking at spaces between words or hyphens)
• Anywhere — to prevent overflow, 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 — behaves the same as the Anywhere option, where normally unbreakable words can be broken at arbitrary points if there are no otherwise acceptable break points in the line

Pro tip: You can learn more about the overflow-wrap property and preview these options in the MDN web docs.

How to set wrapping behavior

Before you can set wrapping behavior, you’ll need to add a text element (e.g., rich text, paragraph, etc.) to the canvas. 

To set wrapping behavior: 

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

As with other style properties, you can add wrapping to a parent element or breakpoint and override it on child elements or lower or higher breakpoints. 

Important: If you have custom overflow-wrap CSS on your site, be sure to remove this to avoid unexpected behavior on your published site. 

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.