Overflow in a Paragraph

Hey man! I managed to get it to work using this:

.truncate { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }

One thing to bear in mind is that Webflow interprets a text block as a div, so the .truncate class needs to be appleid directly to the text block! Let me know how you get on

Thanks Sanindo, but still not working: it simply truncates on the very first line of text.

1 Like

Hi Guys, I am trying to add to the elpisis to the titles of my recipe cards, adding in the custom code in the site wide head tag, added the class and set height of my header to show one line… can anybody point me in the right direction?

https://preview.webflow.com/preview/oxford-factory?utm_medium=preview_link&utm_source=designer&utm_content=oxford-factory&preview=c3c025314d185d48150c8d4cdda8d0d0&pageId=604137367a606f39c31d097c&mode=preview

Hey WebFlow Family!

I’m trying to implement this custom code, but no success so far.

I have two places on my page that I would like to use.

  1. To affect the width of a text-link element on a single line, and to add the ellipsis when the content is larger than the allotted space.

  1. To affect the height of a rich-text element, and to add the ellipsis when the content is larger than the allotted space (for example after three lines of text).

Here’s a Read-Only Webflow Link to my project.
Here’s a Screen Recording Video of my explaining.

Thanks!

Hey Hector I don’t know if you solved it but I’m replying so if somebody else needs this they have it.

So you only need to replace white-space: nowrap; to white-space: normal; The Correct code is below. Make sure to place in the custom code head section of the page.

Also the paragraph block needs to have a fixed height so if line height is 24px and you want it to truncate after two lines then set the height to 48px.

<style>
.truncate { white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis; }
</style>
2 Likes

Hi everyone,

Thank you all for sharing your wisdom here!
I was looking for this as I’m trying to implement the truncate/ellipsis on a RTE CMS element.

It’s nice to have the ellipsis to let the user know that there’s more copy. But what’s the point if the user then can’t reveal the reminder of the copy?
Has anyone figured out how to do it so that the text expands below when the user clicks on the ellipsis – sort of like a drawer that opens up downwards (not a link to another page).
I wonder if there’s a way to add interaction or a script to the ellipsis for it to change the text height on click to auto (plus, ideally, a button to change it back again on click).

Hi Marcos, thanks for sharing!
It’s not working for me, it messes up my layout, the text now stretches across.
I have a grid parent element and my text is in a div. I applied the class directly to my rich text element.
I wonder if the text (or/and the parent element) have to be set in a specific way before you apply the .truncate class to it. Obviously the text hight needs to be specified (as mentioned). But does the layout of the text element need to be set to flex or block; overflow to hidden or visible…? How about the parent element?

Hey @Rapha, I had the same problem as well with the text stretching across what worked for me is to apply a max-width to the truncated block. It should then respect your parent block padding.

@Rapha The main point of the ellipsis is to create uniform CMS items by setting a max height for text content while also cutting off the text in a elegant way. If there was an option to extend the text then it would affect the other CMS Items by extending their height as well and we would be back to square one.

However I think you are trying to create this feature for individual CMS page where extending the text content wouldn’t break immersion. My solution would be to duplicate the rich text content and have the full content hidden. Create a button and add an interaction when someone clicks on it, the truncated text will become hidden and the full text will be displayed and vice versa when someone clicks again.

I’m sure there is a more elegant way with JavaScript to remove the .truncate class and place it back with a button trigger but I don’t have too much experience on that front.

Thank you, Marcos!
I ended up with something similar to what you suggest here.
I have two RTE fields in the CMS, field 1 with a lower character limit, and field 2 with a much higher character limit. Instead of duplicating the whole text the client can decide what they want for the first bit, and write the remainder in the second field. On the site, the button below the first opens up the extension copy (like a drawer) and has button below that for closing the extended text.

I think the truncate/ellipsis/drawer function has potential for the wish-list. It seems to be a rather common thing and should be a native WF built-in feature or at least easier to achieve.

1 Like

Hi! I don’t know if you’ll ever respond to this. This thread seems to be years ago but I did all you said and everything seems to be working fine but with one problem.

Some of my paragraphs have ellipsis after a whitespace. Is there an additional fix to this? I appreciate if someone could help me with this since I’m new to Webflow. Thank you so much! :smiley:

wellness1

Hey Christine, can you send a site preview of your site. Here is a link that shows you how to do that.

That way I can try to figure out the problem. Thanks.

I would recommend this code as an alternative to @ctrav’s (and if you want to see the ellipsis happening inside Webflow Design, add the code to an Embed instead of site-wide custom code)

[data-truncate="true"] { 
  text-overflow: ellipsis;
}

and add the attribute data-truncate="true" to the elements you want to truncate. That will save you from adding another class to an element and keep it clean.

ps: other css attributes such as white-space: nowrap can be added in Webflow to each elements, so in the case of a paragraph it won’t be turned into a 1 long line.
Same thing for overflow: hidden;

2 Likes

Thanks :v: its works!!!