1

The goal is to have a responsive design that hides overflowing multi-line text.
I do not want to use jQuery. Would prefer not to use js, but will do if it's a nice way of using it with vue (not using html element selectors preferred).

What I've tried:

text-overflow: ellipsis - Not suitable because it's only for 1 line.
-webkit-line-clamp: x - Not suitable because my characters could be larger or smaller depending on device or user settings. I can't rely on a set amount of lines.
https://dollarshaveclub.github.io/shave/ - Not suitable because same deal as with clamping. And also it uses js and there's no vue3 adaptation.

Is there ANYTHING out there that has text react responsively to the height of its parent or when overflowing?
Will I have to create a vue3 plugin that adds an ellipsis and hides overflowing text?

.recipe-item-content {
  display: flex;
  flex-direction: column;
  flex: 10 1 auto;
  min-height: 0;

  .recipe-item-content__image {
    display: flex;
    flex: 1 1 content;
    min-height: 0;
  }

  .recipe-item-content__text {
    display: flex; //comment this to not have line-clamp problems.
    flex: 1 1 content;
  }

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

Here's a codepen, showing the problem: https://codepen.io/dazaer/pen/eYyeqzE

All you have to do is resize the window to make it smaller to see the problem with the description.
Currently I'm solving this by commenting out the "flex" property, which works but does not fill the available space with more text as it could.

Karolis Vaitkevicius
  • 310
  • 1
  • 5
  • 14
  • Have you tried to add `overflow: hidden` to `.recipe-item-content`? That would hide the content that overflows that container. Another way would be to add `overflow: hidden` to `recipe-item`, but it's not visually good when the text overflows and the footer buttons appears in front of the text. – Luis de Brito Apr 04 '22 at 00:26
  • For CSS-only, there isn't practical ways. With JS you can do it of course; how sensitive you are to the technique is up to you. I've done this in plain JS and Vue in production. Don't have Vue code handy at the moment. I posted a similar answer in the past, maybe you'll get ideas: https://stackoverflow.com/a/49354945/4378314 . It's easy enough to convert JS into Vue, essentially changing document select's into this.$ref's. – Kalnode Apr 04 '22 at 01:31

0 Answers0