Always keep a specific length of a text

Hello!

I have this type of div

vizualization1

And I need to always keep the 3-line description no matter what size of the screen is opening the page. At least for non-mobile devices. I tried calculating and applying Str::words() but it's not what I expect because you never know how long can the words be. I yet have a post that has 4-line description while Str::words() is applied. How can I do this?

Sinnbeck

3 years ago

Level 102

Maybe use css? https://tailwindcss.com/blog/multi-line-truncation-with-tailwindcss-line-clamp

click

3 years ago

Level 35

This can indeed be done with CSS and the line-clamp property: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp and the browser support is pretty good: https://caniuse.com/?search=line-clamp

lat4732

3 years ago

Level 12

Guys, -webkit-line-clamp: 3 !important; on the description <p> doesn't look like taking any effect. I'm on Firefox Mozilla and it doesn't look like working.

click

3 years ago

Level 35

@Laralex Take a look at the documentation, it explains what you have to do.

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Please or to participate in this conversation.