Webflow sync, pageviews & more.
NEW

How can I make the hyperlinks in my rich text block within Webflow stick to the same line as the rest of the text, when the text is pulled from the collections editor?

TL;DR
  • Ensure hyperlinks in CMS Rich Text fields are inline within paragraphs, not on separate lines.
  • Check and adjust Rich Text styles to use correct display settings (inline for links, block for paragraphs) and remove conflicting margins or paddings.
  • Reformat links added from external sources using the Webflow Rich Text Editor to prevent block-level link behavior.
  • Test with non-CMS Rich Text to isolate the issue, and use custom CSS (display: inline) if necessary.

You're seeing hyperlinks in a Rich Text block break onto a separate line when pulling content from the CMS (Collections) in Webflow. This issue is usually caused by incorrect tag formatting or inherited styles.

1. Inspect CMS Content Formatting

  • Go to the Collection Item in the Webflow CMS Editor.
  • Ensure you're using inline hyperlinks within paragraphs—not pressing Enter before or after links.
  • The structure should look like: “Some sentence with a hyperlink in the middle,” not with the link on its own line.

2. Check and Adjust Rich Text Styles

  • In the Webflow Designer, select the Rich Text block bound to your CMS content.
  • Create a Rich Text wrapper class (e.g., .rich-text-content) if not already applied.
  • Use the Selector panel to target:
  • All Links inside Rich Text (.rich-text-content a)
  • All Paragraphs inside Rich Text (.rich-text-content p)
  • Ensure the following styles are not causing breaks:
  • Display is set to inline (for links) and block (for paragraphs)
  • Remove any margin or padding that forces line breaks

3. Avoid Extra Elements in the CMS

  • Links added via the CMS Rich Text field can sometimes be inserted as their own blocks if returned from tools like Google Docs or Word.
  • To clean this up:
  • Use Webflow's Rich Text Editor in the CMS to re-insert the hyperlink.
  • Highlight the phrase and click the link icon—avoid selecting the full line if it's meant to be inline.

4. Test With Non-CMS Rich Text

  • Add a separate Rich Text element not bound to the CMS.
  • Write a paragraph and insert a link inline to see if it behaves the same.
  • If it stays inline, the CMS content is likely the issue; if it breaks again, it might be a global style or class issue.

5. Use Custom CSS as Last Resort

  • If a pasted CMS hyperlink renders as a block, you may override it:
  • Target .rich-text-content a and set display: inline
  • Apply white-space: normal if wrapping or space issues persist

Summary

To keep hyperlinks inline in a Webflow Rich Text block, ensure your CMS content uses inline links, check Rich Text styles for correct display settings, and clean up any pasted formatting. Inline links should remain on the same line when properly formatted and styled.

Rate this answer

Other Webflow Questions