Как реализовать троеточие при большом размере текст?

Question

[q1zin]

У меня есть множество карточек, в каждом из них должно быть описание, но оно не должно быть больше 3 строчек, иначе выглядит не очень, а описание набирает пользователь (уменьшить описание - не вариант), какие бы я решения не находил - все они работают с 1 блоком, а у меня множество блоков с одинаковым классом, дак ещё и динамически блоки будут добавляться вот картинка блоков (блок описания(стрелочки)) а также это решение должно быть кроссбраузерным

Comments

[N]

htmlbook.ru/blog/obrezaem-dlinnuyu-stro

[Антон Литвиненко]

не знаю на чем у вас, но например в вордпрессе за это отвечает определенная функция, меняя параметры которой можно указать длину и какие символы в конце. собственно думаю везде так можно сделать, где текст приходит из бд. а если вы его пишете вручную, то...

[Максим]

Антон Литвиненко, https://ru.stackoverflow.com/a/1259524/308951

Answer 1

[Danny Arty]

Если вы все таки можете обойтись одной строкой, то хватит одного text-overflow:

.description-block {
height: 50px; 
white-space: nowrap;
overflow: hidden; 
text-overflow: ellipsis;
}

Если же нужно обрезать текст именно на 3-ей строке, то можно использовать -webkit-line-clamp: (к сожалению все также не поддерживается в IE)

.description-block {
height: 50px; 
overflow: hidden; 
text-overflow: ellipsis;
-webkit-line-clamp: 3; //Многоточие в конце 3 строки
}

Comments

[q1zin]

решение норм, но не кроссбраузерное

[Rustam Bainazarov]

q1zin, а кроссбраузерного и нет.

[edward_freedom]

q1zin, судя по описанию вопроса, кроссбраузерное и не надо. Если надо, сделай на js

Answer 2

[sinneren]

ну, например, обернуть текст в инлайновый элемент, задать ему position: relative, у этого же элемента задать псевдоэлемент с контентом "...", сделать абсолютным и припечатать к конку блока (bottom: 0, right: 0), задать фон от фона родителя(белый), и подобрать подходящую ширину\высоту.
можно так же вторым псевдоэлементом добавлять точки
https://codepen.io/regieslinkas/pen/LYxYKBd

а так, гуглим многострочная обрезка текста, материалов много было

Comments

[q1zin]

а если у нас будет меньше текста?

[sinneren]

q1zin, меньше чего?

[q1zin]

у меня блок описания (чек фото), он может быть как из 1 слова, так и из 100, и нужно если текст будет больше 3 строк, чтобы он обрезался и появлялось многоточие, при этом у меня много таких элементов, у все у них одинаковый класс

[Максим]

q1zin, а на stackoverflow дали кучу ответов - не устроили ?

[q1zin]

Максим Ленский, устроили)) но мне интересно ещё посмотреть варианты решений

[sinneren]

q1zin,
1. смотреть на беке кол-во символов и выводить класс
2. смотреть на фронте кол-во символов и добавлять класс
3. смотреть на фронте высоту блока, если больше 1 строки добавлять класс

[q1zin]

sinneren, ууу, 3 решение новое и скорее всего его использую