Часто бывает так, что на странице есть большой кусок текста, который нужно обрезать. Использование overflow: hidden не всегда поможет, ведь текст может обрезаться даже посредине буквы.

Чтобы обрезать куски текста красиво, в CSS есть свойство text-overflow: ellipsis, которое позволяет обрезать строку с длинным текстом, добавляя в конце троеточие ....

Для того, чтобы такое решение сработало, нужно указать точную ширину родительского блока (например, 100%) и добавить несколько параметров.

Все из указанного является обязательным:

.cut-text {
  text-overflow: ellipsis; // обрезка длинных блоков с текстом
  overflow: hidden; // прятать выходящий за пределы текст
  width: 100%; // ширина блока с текстом
  white-space: nowrap; // запрет на перенос текста
}

Давайте посмотрим, как это работает.

<div class="cut-text">
А это Томми. Он всем говорит, что его назвали в честь автомата «Томми ган», но на самом деле его назвали в честь знаменитого в 19-ом веке балетного плясуна.
</div>

И вот что получится в результате:

А это Томми. Он всем говорит, что его назвали в честь автомата «Томми ган», но на самом деле его назвали в честь знаменитого в 19-ом веке балетного плясуна.

Если текст внутри блока помещается в него, троеточие добавляться не будет, а сам текст будет отображаться как обычно:

Томми всем говорит, что его назвали в честь автомата «Томми ган».

Обратите внимание: такое решение работает только для текста в одну строку.

    Отправить ответ

    1 Комментарий на "Как обрезать длинные тексты только при помощи CSS"

    Уведомлять
    avatar
    5000
    Мария
    Гость

    А есть идеи, как обрезать подобным образом многострочный текст по высоте блока?

    wpDiscuz