У CSS есть замечательное свойство text-overflow со значением ellipsis которое позволяет ограничивать длину текста добавляя три точки если текст не помещается полностью. Это позволяет добиться эстетичного эффекта и не ломать дизайн.
Но иногда бывает, что это свойство не срабатывает как бы на хотелось.
В чем же может быть причина?
Демонстрация проблемы:
text-overflow: ellipsis;
Слишком длинный текст, который должен быть обрезан, и должно быть добавлено троеточие в конце. Если текст помещается, то троеточие добавлено не будет. Этот текст используется для демонстрации.
Дело в том, что область в которую помещен слишком длинный текст должна быть ограниченной. Что это значит: Блок не должен растягиваться под влиянием текста «overflow: hidden» и текст не должен «стремится пригнуть» на 2-ю строчку «white-space: nowrap».
Демонстрация решения проблемы:
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
спасибо огромное помогло!
А если нужно, чтобы текст не превышал двух строк? Т.е. с первой на вторую переносился, а если уж и во вторую не влез — тогда во второй строке добавлять троеточие.
Как такое провернуть?
Иван, посмотрите в сторону jQuery.dotdotdot
https://github.com/BeSite/jQuery.dotdotdot
Я еще добавил в Title предложение если превышает длину