Ability to pull in an article’s first few paragraphs on the front page

I wouldn’t be surprised if the team was all ready working on this. Could be a situation where a range of words, paragraphs, or letters can be set as a limit to pull in, in order to populate a dynamic list with the first few paragraphs that comprise an article’s Rich Text field.

Cheers, team.

One step further, allow us to limit the amount of characters that a text or rich text box can display ending with an ellispsis (should cater for full words)

example

FULL TEXT
“Reading is easier, too, in the new Reading view. You can collapse parts of the document and focus on the text you want. If you need to stop reading before you reach the end, Word remembers where you left off - even on another device.”

LIMITED TEXT
“Reading is easier, too, in the new Reading view. You can…”

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? :wink:

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.

2 Likes

Hi all,

I love this solution:

But I don’t know where to add the CSS code.

I’ve tried on the page’s settings in the custom code and before and also via a custom code block on the page. The only code I tried adding was what is listed just above with the class name changed to the one I’m using.

Thanks!

1 Like