How can I set a large paragraph with line breaks in Webflow CMS Collections?
TL;DR
- Use a Rich Text field in your CMS and enter content using Enter for paragraphs or Shift + Enter for line breaks.
- Bind this field to a Rich Text element on your page and apply custom styles if needed; avoid Plain Text fields for formatted content.
To set a large paragraph with line breaks in a Webflow CMS Collection, you need to ensure the text formatting is preserved both when entering and displaying the content.
1. Use a Rich Text Field in the CMS
- Go to your CMS Collection and either add a new field or use an existing one.
- Choose the Rich Text field type, which is designed to support paragraphs, line breaks, bolding, and other formatting.
- When entering content, press Enter once for a line break (to begin a new paragraph) or Shift + Enter for a soft break (just a newline without paragraph spacing).
2. Bind a Rich Text Field to a Rich Text Element
- On your page, drag a Rich Text element into the CMS Collection Template Page or a Collection List.
- Select the Rich Text element, then click the purple “Get text from” icon in the settings panel.
- Bind it to your Rich Text Field from the CMS.
3. Optional: Apply Custom Styling to Format Paragraphs
- Webflow automatically wraps paragraphs from the Rich Text field in
<p>tags, which support line breaks. - To customize appearance (e.g., line height, spacing), click on the Rich Text element, then go to the Selector Panel and style the tags like All Paragraphs or All Rich Text Blocks.
4. Avoid Using Plain Text Fields for Formatted Text
- Plain Text fields strip out formatting and line breaks when displayed on the live site.
- If you've already added text to a Plain Text field and want to preserve breaks, copy/paste it into a Rich Text field.
Summary
Use a Rich Text field in your CMS Collection and bind it to a Rich Text element on the page to preserve and display large paragraphs with line breaks correctly. Avoid using plain text fields for formatted content.