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