Обрезка текста (text-overflow)link

https://dev.ru.simai.io/ru/ui/utility/typography/text-overflow.php

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

Таблица классовlink

Класс Значение
.truncate overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.t-ellipsis text-overflow: ellipsis;
.t-clip text-overflow: clip;

Синтаксисlink

Использование: {контрольная точка}:{модификатор} или просто {модификатор}

  • Контрольная точка (необязательный параметр):
    Применяет модификатор начиная с определённого размера экрана (sm, md, lg, xl).
    Если не указана, модификатор применяется для всех размеров.

  • Модификатор (обязательный параметр):

    • truncate – текст в одну строку, лишний текст обрезается, в конце добавляется многоточие.
    • t-ellipsis – текст обрезается с многоточием, необходимо вручную указать overflow-hidden и white-space: nowrap.
    • t-clip – текст обрезается без многоточия, необходимо вручную указать overflow-hidden и white-space: nowrap.

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

<!-- Пример с truncate -->
<p class="truncate ...">Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>


<!-- Пример с t-ellipsis -->
<p class="overflow-hidden whitespace-nowrap t-ellipsis ...">Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>


<!-- Пример с t-clip -->
<p class="overflow-hidden whitespace-nowrap t-clip ...">Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>