How to add non-breaking spaces in Webflow CMS rich text elements

Introduction

Have you ever encountered those pesky line breaks that disrupt the flow of your text, especially when certain letters or words appear at the end of lines? Well, you're not alone. In English typography, there are several letters and words that are best avoided in such positions to maintain a smooth reading experience.

‍

In this short tutorial, we'll explore how to implement a JavaScript script that automatically adds non-breaking spaces after specific letters and words in your Webflow Rich Text elements. By incorporating this script into your project, you'll ensure that words like "a," "an," "the," "I," "i," "o," "and," "for," "to," and others are intelligently handled to prevent awkward line breaks.

‍

Step 1: Add the script to your Webflow project

To get started, open your Webflow project in the Designer. Go to the page where you want to apply the script and follow these steps:

Select the page head section by clicking on the gear icon in the top-right corner of the Designer panel.
Choose the "Custom Code" option from the dropdown menu.
In the "Body Code" section, paste the script code provided below.

That's it! The script is now added to your Webflow project and ready for implementation.

<script>
// Get the Rich Text elements by class name
const richTextElements = document.getElementsByClassName('YOUR-RICH-TEXT-CLASS-NAME');

// Loop through each Rich Text element
for (const richTextElement of richTextElements) {
// Get the HTML content of the Rich Text element
let richTextContent = richTextElement.innerHTML;

// Define the letters that need a non-breaking space
const letters = ['a', 'an', 'the', 'I', 'i', 'o', 'and', 'for', 'to'];

// Loop through each letter and add a non-breaking space after it
for (const letter of letters) {
const regex = new RegExp(`${letter}\\s`, 'gi');
richTextContent = richTextContent.replace(regex, `${letter} `);
}

// Set the updated HTML content back to the Rich Text element
richTextElement.innerHTML = richTextContent;
}
</script>

Step 2: Apply the script to rich text elements

Now that the script is in place, we need to target the Rich Text elements and modify their content. Follow these steps to apply the script:

In the Webflow Designer, select the page where you want to apply the script.
Identify the Rich Text elements you want to enhance. These can be text blocks, paragraphs, or any other elements with Rich Text formatting applied.
Assign a class name to each Rich Text element that requires the non-breaking space treatment. For example, you can add the class name "custom-rich-text" to these elements.
Save your changes and publish the site for the script to take effect.

Now, when visitors load your Webflow page, the script will automatically add non-breaking spaces after the specified letters within the Rich Text elements you targeted.

‍

Customizing the script

The provided script currently adds non-breaking spaces after the letters "a," "an," "the," "I," "i," "o," "and," "for," "to,". If you'd like to add or remove letters from this list, you can easily customize the script to fit your specific needs.

Simon Koran

Webflow Developer & Designer

How to add non-breaking spaces in Webflow CMS rich text elements

Introduction

Step 1: Add the script to your Webflow project

Step 2: Apply the script to rich text elements

Customizing the script

Websites that meet your needs

The first step is up to you