Обрезаем длинную строчку

Обрезать длинные строчки необходимо тогда, когда веб-страницу посещают через мобильные устройства, разрешение и размер экрана которых ограничено. Обрезать строчки можно с помощью РНР, однако с помощью CSS данный процесс проще.

Применение overflow.

Чтобы свойство overflow работало на полную, необходимо сделать отмену переносов, что делается через white-space и его значения nowrap. Если переносы останутся, то текст будет отображаться полностью.

После применения overflow необходимо обратить внимание на конец строчки, здесь визуально будет не понятно, закончился текст или есть его продолжение. Поэтому лучше добавить многоточие или градиент.

Добавление к тексту градиента.

Как правило, градиент накладывается на правую часть строчного текста, где должен быть переход от прозрачного цвета до общего фонового цвета. Таким образом, создастся впечатление растворение текста.

Стиль элемента останется прежним, а градиент необходимо добавлять через псевдоэлемент ::after. Данный псевдоэлемнт должен быть вставлен с помощью свойства content, к которому применяется градиент с префиксами. Размер градиента по ширине задается через width и необходимым значением в пикселах или процентах.

Следует помнить, что градиенты не поддерживаются браузерами IE до восьмой версии!

Делаем многоточие.

В конце текста можно использовать многоточие, которое будет добавляться автоматически через свойство text-overflow и значения ellipsis. Это свойство корректно отображают все браузеры, в том числе IE старых версий, но оно не пройдет валидацию при использовании CSS3.

Преимущество многоточия и градиента заключается в том, что они не отображаются если ширина текста помещается в мониторе. Они начинают действовать только в том случае, если ширина монитора не позволяет вместить весь текст.

Sorry. No data so far.

Окно для комментирования

Вы должны заполнить данные для комментария.