Длина строки
Классы measure-* ограничивают наибольшую ширину блока в символах: около 45,
65 или 80. Берите их для абзацев статей, описаний и форм, чтобы строка не
растягивалась на всю ширину широкого экрана.
Пример
Значения
Фон показывает ширину блока.
measure-narrow
Длина строки влияет на удобство чтения: глазу трудно найти начало следующей строки, если текущая слишком длинная, а слишком короткие строки заставляют часто переводить взгляд. Ограничение ширины в символах держит строку в удобных пределах при любом размере шрифта.
measure
Длина строки влияет на удобство чтения: глазу трудно найти начало следующей строки, если текущая слишком длинная, а слишком короткие строки заставляют часто переводить взгляд. Ограничение ширины в символах держит строку в удобных пределах при любом размере шрифта.
measure-wide
Длина строки влияет на удобство чтения: глазу трудно найти начало следующей строки, если текущая слишком длинная, а слишком короткие строки заставляют часто переводить взгляд. Ограничение ширины в символах держит строку в удобных пределах при любом размере шрифта.
Ширина экрана
Меняйте ширину окна просмотра: начиная с ширины lg строка становится
длиннее.
Классы
| Класс | CSS | Значения |
|---|---|---|
measure |
max-width: var(--sf-text--measure) |
— |
measure-wide |
max-width: var(--sf-text--measure-wide) |
— |
measure-narrow |
max-width: var(--sf-text--measure-narrow) |
— |
Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:measure.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.
| Переменная | Значение по умолчанию |
|---|---|
--sf-text--measure |
65ch |
--sf-text--measure-wide |
80ch |
--sf-text--measure-narrow |
45ch |
Применение
Ширина задана в единицах ch — ширине символа «0» шрифта блока. Поэтому
ограничение растёт вместе с размером шрифта, и в строке остаётся примерно
то же число символов.
| Класс | Ширина | Где |
|---|---|---|
measure-narrow |
45ch |
узкие колонки, подписи, текст рядом с изображением |
measure |
65ch |
основной текст |
measure-wide |
80ch |
справочный текст, таблицы в тексте |
<article class="measure">
<p>Абзац статьи…</p>
</article>
Ограничения
- Класс задаёт только
max-width: блок не центрируется. Для центрирования добавьте внешние отступыm-inline-autoили раскладку родителя. - В тексте с широкими буквами и в моноширинном шрифте в строку входит меньше или больше символов, чем указано.