CSS: Почему ограничение длины текста с троеточием (text-overflow: ellipsis) может не работать корректно

2013-07-05

У CSS есть замечательное свойство text-overflow со значением ellipsis которое позволяет ограничивать длину текста добавляя три точки если текст не помещается полностью. Это позволяет добиться эстетичного эффекта и не ломать дизайн.
Но иногда бывает, что это свойство не срабатывает как бы на хотелось.
В чем же может быть причина?

Демонстрация проблемы:

text-overflow: ellipsis;

Слишком длинный текст, который должен быть обрезан, и должно быть добавлено троеточие в конце. Если текст помещается, то троеточие добавлено не будет. Этот текст используется для демонстрации.

Дело в том, что область в которую помещен слишком длинный текст должна быть ограниченной. Что это значит: Блок не должен растягиваться под влиянием текста «overflow: hidden» и текст не должен «стремится пригнуть» на 2-ю строчку «white-space: nowrap».

Демонстрация решения проблемы:

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

Слишком длинный текст, который должен быть обрезан, и должно быть добавлено многоточие в конце. Если текст помещается, то многоточие добавлено не будет. Этот текст используется для демонстрации.


4 комментария на «CSS: Почему ограничение длины текста с троеточием (text-overflow: ellipsis) может не работать корректно»

  1. спасибо огромное помогло!

  2. Иван:

    А если нужно, чтобы текст не превышал двух строк? Т.е. с первой на вторую переносился, а если уж и во вторую не влез — тогда во второй строке добавлять троеточие.
    Как такое провернуть?

  3. Иван, посмотрите в сторону jQuery.dotdotdot
    https://github.com/BeSite/jQuery.dotdotdot

  4. Я еще добавил в Title предложение если превышает длину

Добавить комментарий