Длина строки

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

Классы

Описание

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

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

• Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
• Модификатор. Обязательный параметр. Принимает значения:
  • measure – длина строки равна 65 символам;
  • measure-wide – длина строки равна 80 символам;
  • measure-narrow – длина строки равна 45 символам;

Пример

<p class="measure">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="measure-wide">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="measure-narrow">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Адаптивность

Для установки длины строки, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору межбуквенного интервала.

Например, используйте модификатор md:measure для ширины текста приблизительно 66 символов для экранов размером Medium и больше.

<p class="md:measure">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Переменные

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