Regulate text overlapping and line breaking

By default, text wrapping only occurs in specific circumstances, such as when there is a space or dash. This can lead to design and arrangement challenges for lengthy strings or series of characters (e.g., URLs) that exceed their container element.

Through the utilization of the word break, line break, and overflow wrap features, you have the ability to manage how your text is fractured and wrapped within elements. This enhances readability across diverse device dimensions and orientations, guaranteeing that the text wraps appropriately according to language-specific necessities, facilitating seamless multilingual support on your site.

In this tutorial, you’ll acquire knowledge on:

1. The application of word breaking
2. The usage of line breaking
3. The implementation of text wrapping
4. Frequently Asked Questions (FAQ)

How to apply word breaking

Utilizing word breaking (the “word-break” CSS property) enables you to modify the default line breaking behavior and indicate where line breaks should occur in text that may otherwise overflow. Word breaks can be employed to prevent awkward line breaks in content featuring compound words, or to conform to language-specific regulations and ensure correct visual presentation for an enhanced international user experience.

There are three options for word breaking:

• Normal – the default setting which follows the standard 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 remain intact even if there is content overflow. Non-CJK text behavior mirrors that of Normal

Pro tip: For further insights on the word-break property and to preview these options, visit the MDN web docs.

How to establish word breaks

Prior to configuring word breaks, it is necessary to introduce a text component (e.g., rich text, paragraph, etc.) to the canvas.

To configure word breaks:

1. Highlight the text component on the canvas
2. Navigate to the Style panel > Typography > More type options > Breaking
3. Choose a word break option from the Word dropdown (e.g., Normal, Break all, or Keep all)

Similar to other styling attributes, you can apply word breaks to a parent element or breakpoint, and override it on child elements or different breakpoints.

Note: To prevent unexpected behavior on your published site, remember to remove any custom word-break CSS present.

How to utilize line breaking

Line breaking in Webflow (referred to as the “white-space” property in CSS) governs the treatment of whitespace characters (i.e., characters representing horizontal or vertical space between other characters) and newline characters (i.e., whitespace characters representing a line break), determining whether text wraps or overflows.

There exist six options for line breaking:

• Normal – the default value which condenses sequences of whitespace and wraps text to the next line as necessary
• No wrap – condenses whitespace similarly to Normal but keeps text on a single line without wrapping, even if the text exceeds the space
• Pre – retains whitespace and line breaks, displaying text precisely as in the HTML source code
• Pre wrap – conserves whitespace while allowing text to wrap to the following line as needed
• Pre line – compresses whitespace, preserves line breaks, and permits text to wrap as required
• Spaces – maintains whitespace sequences, enables text wrapping at any point, and retains trailing spaces

Pro tip: For an in-depth understanding of the white-space property and to preview these variations, refer to the MDN web docs.

How to configure line breaks

Before setting line breaks, introduce a text element (e.g., rich text, paragraph, etc.) to the canvas.

To configure line breaks:

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

As with other styling attributes, you can apply line breaks to a parent element or breakpoint, and modify it on child elements or different breakpoints.

Note: To avoid unexpected behavior on your published site, ensure any custom white-space CSS is removed.

How to apply text wrapping

Text wrapping (the “overflow-wrap” CSS property) empowers you to determine how words wrap when they surpass the width of their container, ensuring words are broken at the nearest suitable point within the container, thus preserving your design’s integrity and aesthetics.

There are three options for wrapping:

• Normal – the default setting following the standard breaking rules (i.e., breaking at word spaces or hyphens)
• Anywhere – to prevent overflow, an otherwise unbreakable series of characters (e.g., a URL or long word) can be broken at any juncture if no other break points are available in the line
• Break word – functions analogously to the Anywhere option, enabling normally unbreakable words to be fractured at arbitrary points if no other acceptable break points exist in the line

Pro tip: For additional insights on the overflow-wrap property and to preview these choices, visit the MDN web docs.

How to configure wrapping behavior

Before setting wrapping behavior, add a text element (e.g., rich text, paragraph, etc.) to the canvas.

To configure wrapping behavior:

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

Similar to other styling attributes, you can apply wrapping to a parent element or breakpoint, and modify it on child elements or different breakpoints.

Note: To prevent unexpected behavior on your published site, ensure any custom overflow-wrap CSS is removed.

FAQ

What is the distinction between word breaking and line breaking?

Both word breaking and line breaking influence text display on the page. Line breaking dictates how whitespace characters are managed, and whether text overflows or wraps. Word breaking controls word fragmentation and wrapping within the text. Word breaks are particularly beneficial for URLs or languages with specific word segmentation rules (e.g., Chinese, Japanese, and Korean).

Why is “break-word” not available as a word breaking option?

As per the CSS specification, “word-break: break-word” is deprecated in favor of “overflow-wrap: break-word.” However, you can utilize “break-word” for wrapping purposes.