Hi.
Yes, it would be called an automatic teaser in the CMS world (when you take a certain number of characters from a body of text to display them as an intro or teaser).
So we don’t have this possibility yet in Webflow as you describe it.
However, this can maybe force you to a better method. in the CMS world, developers—and clients— quickly got tired of uncontrolled pieces of text appearing as teasers in the lists. intros of articles are written differently and it doesn’t always make sens to cut them arbitrarily. Instead of doing an automatic teaser, we grew to design a teaser field in every type of content (collection). So like title, teaser, body etc… You’re using the teaser only where it’s needed and the person who creates the record (content) writes a teaser manually, specifically, within the limits you’ve set. The writers either creates it from scratch or copy relevant material in the body.
http://vincent.polenordstudio.fr/snap/2ro2x.jpg
There is also a dirty way of limiting the height of an element to mask text:
http://vincent.polenordstudio.fr/snap/q90j7.jpg
You can make that less dirty by maybe add an overlay with a gradient that progressively mask the text with the bg color.
http://vincent.polenordstudio.fr/snap/57dw6.jpg
You can also add a bit of CSS code to make it better. “Ellipsis” can be a property of “text-overflow” and add “…” before the text is cropped.
.text {
overflow: hidden;
text-overflow: ellipsis;
}
There’s also a way to limit the text to n lines
.text {
display: -webkit-box;
line-height: 16px; /* fallback */
max-height: 32px; /* fallback */
-webkit-line-clamp: 2; /* number of lines to show */
-webkit-box-orient: vertical;
}
Calculate the values as follow: (fallback is for non webkit browsers)
-webkit-line-clamp: N; /* number of lines to show */
line-height: X; /* fallback */
max-height: X*N; /* fallback */
And you can combine the lines limitation with the ellipsis overflow. CSS3 Vertical ellipsis - JSFiddle - Code Playground
Also numerous solutions with JS but where is the fun with JS… right?
I got the following with all my solutions combined:
http://vincent.polenordstudio.fr/snap/1slrs.jpg
We could even add something like a general rule (at site level, in the dashobard custom code section) for ellipsis on text overflow, and then only deal with the height of blocks in the design.