Назар Токар
Опубліковано: 17 Серпня 2015
Оновлено: 5 Травня 2017

Часто бывает так, что на странице есть большой кусок текста, который нужно обрезать. Использование 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-ом веке балетного плясуна.

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

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

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

← Тисни «Лайк», щоб читати нас у Фейсбуці
    Поширити у Фейсбуці
    Надіслати у Messenger
    Надіслати в Telegram
    Надіслати у WhatsApp
    Зберегти в Pocket

    Додати коментар

    Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

    Ви вказали некоректні логін або пароль

    Вибачте, для коментування необхідно увійти.

    1 коментар

    спочатку нові
    за рейтингом спочатку нові за хронологією

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