Пробелы

В SIMAI Framework с помощью модификаторов вы можете управлять обработкой пробельными символами при отображении.

Классы

Описание

Адаптивный модификатор. Управляет тем, как обрабатываются пробельные символы внутри элемента.

Пробельные символы — это множество символов использующихся для горизонтального или вертикального разделения остальных символов. Они используются для разделения токенов в HTML, CSS, JavaScript и других компьютерных языках.

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

• Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
• Модификатор. Обязательный параметр. Принимает значения:
  • wrap-none – объединяет последовательности пробелов в один пробел, как значение normal, но не переносит строки (оборачивание текста) внутри текста;
  • pre – последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы <br>;
  • pre-line – последовательности пробелов объединяются в один пробел. Строки разбиваются по символам новой строки, по элементам <br>, и при необходимости для заполнения строчных боксов;
  • pre-wrap – последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы <br>, и при необходимости для заполнения строчных боксов;
  • whitespace-normal – последовательности пробелов объединяются в один пробел. Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения при необходимости разбивает строки для того, чтобы заполнить строчные боксы;

Пример

Используйте модификаторы обрезки текста для размещения текста в заданной области.

wrap-none

Модификатор wrap-none объединяет последовательности пробелов в один пробел, как значение normal, но не переносит строки (оборачивание текста) внутри текста.

<p class="wrap-none ...">
	Lorem Ipsum is simply dummy text of the printing and typesetting 
			industry. Lorem Ipsum has been the industry's standard dummy 
					text ever since the 1500s, when an unknown printer took 
							a galley of type and scrambled it to make a type specimen book.
</p>

pre

Модификатор pre сохраняет последовательности пробелов так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы <br>.

<p class="pre ...">
	Lorem Ipsum is simply dummy text of the printing and typesetting 
			industry. Lorem Ipsum has been the industry's standard dummy 
					text ever since the 1500s, when an unknown printer took 
							a galley of type and scrambled it to make a type specimen book.
</p>

pre-line

Модификатор pre-line объединяет последовательности пробелов в один пробел. Строки разбиваются по символам новой строки, по элементам <br>, и при необходимости для заполнения строчных боксов.

<p class="pre-line ...">
	Lorem Ipsum is simply dummy text of the printing and typesetting 
			industry. Lorem Ipsum has been the industry's standard dummy 
					text ever since the 1500s, when an unknown printer took 
							a galley of type and scrambled it to make a type specimen book.
</p>

pre-wrap

Модификатор pre-wrap сохраняет последовательности пробелов так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы <br>, и при необходимости для заполнения строчных боксов

<p class="pre-wrap ...">
	Lorem Ipsum is simply dummy text of the printing and typesetting 
			industry. Lorem Ipsum has been the industry's standard dummy 
					text ever since the 1500s, when an unknown printer took 
							a galley of type and scrambled it to make a type specimen book.
</p>

whitespace-normal

Модификатор whitespace-normal объединяет последовательности пробелов в один пробел. Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения при необходимости разбивает строки для того, чтобы заполнить строчные боксы

<p class="whitespace-normal ...">
	Lorem Ipsum is simply dummy text of the printing and typesetting 
			industry. Lorem Ipsum has been the industry's standard dummy 
					text ever since the 1500s, when an unknown printer took 
							a galley of type and scrambled it to make a type specimen book.
</p>

Изменить статью