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
- Check for extra spaces or line breaks in the CMS rich text field.
- Adjust Rich Text Block typography settings to prevent unwanted line breaks.
- Ensure links are set to inline and reset margins/padding to avoid breaks.
- Apply custom CSS (
.w-richtext a { display: inline !important; }) if styling fixes don't work. - Re-publish and test, ensuring the parent element doesn’t constrain text width.
If hyperlinks in your Rich Text Block break onto a new line when pulling content from the Collections Editor, the issue is likely related to Webflow's default styling, spacing, or how the content is structured in the CMS.
1. Check for Extra Spaces or Line Breaks
- Go to your Collections Editor and open the rich text field where the link is inserted.
- Ensure there are no unintended line breaks before or after the link.
- If the hyperlink is entered on a new line in the CMS, Webflow may interpret it as a separate paragraph.
2. Adjust Webflow's Rich Text Styling
- Select your Rich Text Block on the canvas.
- In the Style Panel, check the Typography settings.
- Ensure that paragraph spacing, margin, or text formatting does not force the link onto a new line.
- If necessary, adjust the letter spacing and line-height for better inline behavior.
3. Inspect and Fix Link Styling
- Click inside the Rich Text Block and find a linked word within the text.
- Go to the Style Panel and ensure the link’s display is set to inline (not block).
- If your link has custom styling, reset all margins and paddings to zero so it doesn’t create unwanted breaks.
4. Use Custom CSS (If Styling Adjustments Don't Work)
If the above steps don’t solve the problem, you can apply a small CSS tweak:
- Go to Page Settings > Inside Custom Code > Inside the
<style>tag in the Head section. - Add the following custom CSS:
<style> .w-richtext a { display: inline !important; } </style> - This forces all Rich Text Block links to stay inline.
5. Re-Publish and Test
- Publish your site to staging first and test if the hyperlinks remain inline.
- If the issue persists, review the parent element’s width settings to ensure the text isn’t constrained unnecessarily.
Summary
To keep hyperlinks inline in a Rich Text Block sourced from a CMS Collection, check for extra spaces in the CMS, adjust styling for Typography and Link display, and apply CSS fixes if needed.