Классы задают выравнивание строк текста внутри блока. text-start и
text-end следуют направлению письма: в документе справа налево начало
строки справа. Берите их вместо выравнивания по левому и правому краю.
Пример
Значения
Подпись над образцом — класс, который на нём стоит.
HTML
<divclass="grid grid-col-1 sm:grid-col-2 gap-3 color-on-surface">
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">text-start</code>
<pclass="m-0 p-2 text-2 border border-dashed border-outline radius-ui text-start">Выравнивание действует на строки внутри блока. Последняя строка абзаца показывает разницу лучше всего.</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">text-center</code>
<pclass="m-0 p-2 text-2 border border-dashed border-outline radius-ui text-center">Выравнивание действует на строки внутри блока. Последняя строка абзаца показывает разницу лучше всего.</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">text-end</code>
<pclass="m-0 p-2 text-2 border border-dashed border-outline radius-ui text-end">Выравнивание действует на строки внутри блока. Последняя строка абзаца показывает разницу лучше всего.</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">text-justify</code>
<pclass="m-0 p-2 text-2 border border-dashed border-outline radius-ui text-justify">Выравнивание действует на строки внутри блока. Последняя строка абзаца показывает разницу лучше всего.</p>
</div>
</div>
Направление письма
Один и тот же класс в блоке слева направо и справа налево.
