Как сделать текст в одну строку css
Перейти к содержимому

Как сделать текст в одну строку css

  • автор:

Текст в одну строку и троеточие в конце CSS

Текст в одну строку и троеточие в конце. Как это сделать? Text in one line and ellipses at the end.

Для этого есть замечательное CSS3 свойство text-overflow.

Это свойство определяет параметры видимости текста в блоке, если текст полностью не помещается в область видимости. Есть 2 варианта: текст просто обрезается, или текст обрезается и к концу строки добавится многоточие. text-overflow работает только если блоку присвоено свойство overflow со значением hidden или auto или scroll. Также нужно применить свойство white-space с параметром nowrap что скажет браузеру не переносить текст на новую строку.

Значения text-overflow:

clip — Текст который не помещается обрезается.

ellipsis — Текст обрезается и в конце мы увидим троеточие.

Пример использования:

Если вы знаете другие варианты или нашли недочеты в статье — пишите в комментариях, обязательно подправим.

Текст в одну строку и троеточие в конце CSS

Иногда приходится ограничивать длинный текст, к примеру, в блоке с фиксированными размерами, чтобы текст не выходил за пределы этого блока. Часто делается так: текст, который не помещается в заданные размеры, обрезается, а в конце текста добавляется многоточие. Оно подсказывает пользователю, что текст отображается лишь частично.

Все это можно сделать с помощью CSS и замечательного свойства text-overflow.

Это свойство определяет параметры видимости текста в блоке, если текст полностью не помещается в область видимости. Есть 2 варианта: текст просто обрезается, или текст обрезается и к концу строки добавится многоточие. text-overflow работает только если блоку присвоено свойство overflow со значением hidden или auto или scroll. Также нужно применить свойство white-space с параметром nowrap что скажет браузеру не переносить текст на новую строку.

clip — текст который не помещается обрезается.

ellipsis — текст обрезается и в конце мы увидим троеточие.

Как запретить перенос текста?

HTML самостоятельно переносит текст на другую строку, если текст целиком не помещается в одну строку. В некоторых случаях, наоборот, требуется запретить перенос слов, к примеру, в пунктах меню или в коде программы, чтобы не «ломать» вёрстку. Для этого используется стилевое свойство white-space со значением nowrap , оно добавляется к нужному элементу с текстом.

В примере 1 white-space применяется к ссылкам, чтобы текст ссылки не «разбивался» и не переносился на другую строку.

Пример 1. Использование white-space

Результат данного примера показан на рис. 1.

Меню с запретом переноса текста

Рис. 1. Меню с запретом переноса текста

См. также

  • text-overflow
  • white-space
  • Оформление ссылок

Многоточие в конце строки на CSS

Рассмотрим два варианта как можно при помощи CSS обрезать длинный однострочный или многострочный текст.

Вариант 1

В этом варианте из всего текста получится только одна строка с многоточием на конце.

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

Вариант 2

Если же нужно сделать многоточие, к примеру, на второй строке текста, используем следующий вариант. В свойстве -webkit-line-clamp указываем необходимое количество строк.

display: -webkit-box; -webkit-line-clamp: 2; // количество строк -webkit-box-orient: vertical; overflow: hidden;

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *