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

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

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


.text {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-height: 20px;
    max-height: 80px;
    background: white;
}


Максимальная высота max-height: 80px; — устанавливается для браузеров которые не поддерживают свойство: -webkit-line-clamp и если нужно обрезать так, чтобы осталось 4 строки, тогда приблизительная максимальная высота блока должна равняться ===> 80px.

А если нужно 3 строки тогда должна устанавливаться высота равная ===> 60px и так далее, исходя из высоты шрифта и других факторов.

Кстати при таком подходе элементу не получается добавить padding и, следовательно, если нужны внутренние отступы для текстового блока, можно добавить обёртку со свойством padding. В примере всё указано.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Есть старый и сложный костыль, с кучей врапперов:
codepen.io/romanrudenko/pen/ymHFh

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

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

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