Is it possible to force a line-break within a heading in Webflow?

Published on
September 22, 2023

Yes, it is possible to force a line-break within a heading in Webflow by using custom code. By default, headings in Webflow don’t allow line breaks within them, as they are meant to be displayed as one continuous line of text. However, if you need to force a line-break within a heading, you can follow these steps:

  1. Select the heading element that you want to add a line break to.
  2. In the Styles panel on the right, click on the Custom Code tab.
  3. Under the </head> section, click on the +</> button to add a new custom code block.
  4. In the newly added code block, enter the following CSS code: word-wrap: break-word;.
  5. Save and publish your site to see the line break in the heading.

By adding the word-wrap: break-word; CSS property to the heading element, you are instructing the browser to break the text onto a new line if it exceeds the width of its containing element. This effectively forces a line break within the heading.

Keep in mind that forcing a line break within a heading should be used sparingly and only when necessary to maintain legibility or for design purposes. It's important to consider the overall readability and visual cohesiveness of your content, as excessive use of line breaks within headings may hinder the user experience.

Example custom code:

<style>  h1 {    word-wrap: break-word;  }</style>

Additional Questions:

  1. How do I add a line break within a heading in Webflow?
  2. Can I customize the styling of headings in Webflow to allow line breaks?
  3. What is the CSS property I can use to force line breaks within a heading in Webflow?