Обрезка текста
text-overflow
В SIMAI Framework с помощью модификаторов обрезки вы можете отсечь текст который не помещается в родительский элемент.
Классы
| Класс | Значение |
|---|---|
truncate |
overflow: hidden; |
t-ellipsis |
text-overflow: ellipsis; |
t-clip |
text-overflow: clip; |
Описание
Адаптивный модификатор. Обрезает текст которые не вмещается в родительский элемент.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Принимает значения:
truncate– текст отображается в одну строку которая обрезается с многоточием на конце;t-ellipsis– обрезаются с многоточием на конце строки которые не помещаются в родительский элемент;t-clip– обрезаются строки которые не помещаются в родительский элемент.
Пример
Используйте модификаторы обрезки текста для размещения текста в заданной области.
Обрезка
Модификаторо truncate позволяет обрезать переполненный текст добавив в конце многоточие.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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 позволяет обрезать переполненную строку текста добавив в конце строки многоточие.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p class="overflow-hidden 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 позволяет отсечь переполненную строку текста.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p class="overflow-hidden t-clip ...">Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>