Required for basic website functionality.
These items are used to deliver advertising that is more relevant to you and your interests.
Collects data on website performance, visitor interaction, and potential technical issues.
Remembers choices made (such as user name, language, or region) and provides enhanced, more personal features.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Custom Script

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

Learn how to enhance the typography in your Webflow website by implementing a simple JavaScript that adds non-breaking spaces after specific letters in Rich Text elements.


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:

  1. Select the page head section by clicking on the gear icon in the top-right corner of the Designer panel.
  2. Choose the "Custom Code" option from the dropdown menu.
  3. 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.

Copy code
// 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;

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:

  1. In the Webflow Designer, select the page where you want to apply the script.
  2. Identify the Rich Text elements you want to enhance. These can be text blocks, paragraphs, or any other elements with Rich Text formatting applied.
  3. 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.
  4. 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.

The first step is up to you

Please be as precise as possible, as it saves us both time.

Get started →

Don't like forms?

Available from
Sep 1, 2023
$45 / hour
$45 / hour

By submitting the form, you agree with privacy policy.

By submitting you agree with Privacy Policy.
Thank you! Your project request has been received! I will reply within 24 hours at the latest.
Oops! Something went wrong while submitting the form.
Hire me