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.
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
