@q1zin

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

У меня есть множество карточек, в каждом из них должно быть описание, но оно не должно быть больше 3 строчек, иначе выглядит не очень, а описание набирает пользователь (уменьшить описание - не вариант), какие бы я решения не находил - все они работают с 1 блоком, а у меня множество блоков с одинаковым классом, дак ещё и динамически блоки будут добавляться вот картинка блоков cMMGk.jpg (блок описания(стрелочки)) а также это решение должно быть кроссбраузерным
  • Вопрос задан
  • 656 просмотров
Пригласить эксперта
Ответы на вопрос 2
DanArst
@DanArst Куратор тега CSS
Гриффиндор в моде при любой погоде!
Если вы все таки можете обойтись одной строкой, то хватит одного 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 строки
}
Ответ написан
sinneren
@sinneren
ну, например, обернуть текст в инлайновый элемент, задать ему position: relative, у этого же элемента задать псевдоэлемент с контентом "...", сделать абсолютным и припечатать к конку блока (bottom: 0, right: 0), задать фон от фона родителя(белый), и подобрать подходящую ширину\высоту.
можно так же вторым псевдоэлементом добавлять точки
https://codepen.io/regieslinkas/pen/LYxYKBd

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы