Formatting Text in Webflow

Truncating Text w/ Ellipsis

Overview
Formatting Text Elements
Formatting Numbers & Currencies
6:09
210
Truncating Text w/ Ellipsis
220
Isolating Bold & Italic Styles in Headings & Text
4:26
221
Emojis & Line-Breaking
2:28
223
Fitting Text Exactly
224
Highlighting Text
225
Formatting Dates & Times
Formatting Dates
251
Formatting Collection Lists
Comma-Separated List Items
7:15
310
Formatting Rich Text Elements
Formatting Rich Text Elements
410
Formatting CMS-Bound Rich Text Elements
420
Add a Highlighting & Code Effect to Rich Text
7:03
425
Nested Lists in Rich Text Elements
2:37
430
No items found.
Published
Updated
November 4, 2022
in lightbox

With CMS-driven layouts in particular, having an uncontrolled amount of text can become a problem. If a client makes an extra long title in that blog post, it just breaks everything.

Fortunately, there are a range of solutions to this, everything from character and word-counts limits using Javascript, to line-length limits

Approaches

CSS Line-Clamping

This is Sygnal's favorite approach, because it ensures that the maximum amount of text is shown, up to a maximum number of lines. If it exceeds that, it is truncated with ellipses.

  • Supported by all major modern browsers
  • CSS-only, no JS required

We like this solution so much that we've embedded it into SA5's HTML Library.

SA5 Truncate Text w/ Ellipses

JS-based solutions

In some cases, you may want a JS-based approach to limit the number of characters or words instead.

https://discourse.webflow.com/t/how-can-i-limit-the-characters-in-the-collection-item-name-currently-no-option-in-the-default-fiels/136363/5

Notes

How to set a maximum number of lines of text with CSS

https://www.youtube.com/watch?v=b6iVByCOx8A&ab_channel=KevinPowell

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.