How do I truncate names and bios in Webflow CMS to maintain grid size without wrapping or shrinking the text?
- Add a custom class to the text element and apply CSS styles: display block/inline-block, white-space nowrap, overflow hidden, text-overflow ellipsis, and set a max-width.
- For multi-line bios, use an embed with custom CSS using -webkit-line-clamp and overflow hidden to limit lines and show ellipsis.
To truncate long names or bios in your Webflow CMS without text wrapping or resizing, you need to use custom CSS to apply text truncation with ellipsis. This ensures that the grid maintains consistent size and layout.
1. Add a Custom Class to the Text Element
- Select the Text Block, Paragraph, or Heading linked to the CMS field.
- Add a custom class, such as
truncate-text.
2. Apply Truncation Styles in the Style Panel
In the Style panel for this class:
- Set Display to
BlockorInline Block. - Set White Space to
No Wrap. - Set Overflow to
Hidden. - Set Text Overflow to
Ellipsis. - Set a max-width or width appropriate to your grid layout.
This will prevent the text from wrapping and instead display an ellipsis (...) when the text exceeds the defined width.
3. Limit the Text Height (Optional for Bios)
For longer bios where you need multi-line truncation, Webflow doesn’t support this directly through the style panel, but you can inject custom code:
Add an Embed component to your page or inside the
<head>section in Page Settings.Apply the
truncate-multilineclass in Webflow to your bio element, and in the embed, include inline CSS like:``
This will limit the bio to a fixed number of lines with ellipsis shown after the final visible line.
4. Check Responsiveness
- Ensure your truncation width or line limits work well across breakpoints.
- Optionally, use relative widths (e.g., % or VW) for better adaptability in different grid layouts.
Summary
Use CSS properties like overflow: hidden, text-overflow: ellipsis, and white-space: nowrap to truncate single-line text like names. For bios, use -webkit-line-clamp for multi-line truncation via embedded CSS. This ensures consistent grid sizes without wrapping or shrinking text.