AtriSimone
@AtriSimone
Осваиваю Front-end

Как использовать text-overflov: ellipsis; для текста в несколько строк?

Добрый день!
Есть блок текстом и на определенном разрешении (768px и меньше) мне нужно этот блок с текстом сделать заданной высоты и обрезать текст с троеточием в конце.
text-overflov заработал, только в случае если текст будет без переносов(т.е. одной строкой - white-space: nowrap;). Мне же нужно несколько строк и в конце троеточие.
Вот в этом примере: https://jsfiddle.net/cqsywuq8/ как добавить в конец троеточие без white-space: nowrap;?
Спасибо!
  • Вопрос задан
  • 9311 просмотров
Решения вопроса 1
Manyaka
@Manyaka
.block {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Есть старый и сложный костыль, с кучей врапперов:
codepen.io/romanrudenko/pen/ymHFh

И статья о том, как эта «магия» работает:
dev.mobify.com/blog/multiline-ellipsis-in-pure-css
Ответ написан
Комментировать
aliencash
@aliencash
Партизан
Нет такой возможности.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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