Настя Котова // Frontend & Node.js

Все вы знаете свойство text-wrap, с помощью которого можно указать, переносить текст в контейнере или нет. Однако у этого свойства есть два интересных параметра: balance и pretty.

Параметр balance помогает сбалансировать строки текста так, чтобы обеспечить равномерное распределение слов по строкам. Сравните отображение с text-wrap: wrap и text-wrap: balance. Однако, это свойство работает только для коротких текстов (меньше 6 или 10 строк, в зависимости от браузера).

Параметр pretty наоборот предназначен для длинных текстовых блоков, где хорошая типографика важнее производительности. Он делает множество улучшений, связанных с переносами, в частности предотвращает появление одиноких слов в конце абзаца. Сравните отображение с text-wrap: wrap и text-wrap: pretty для длинного текста.

Таким образом, значение balance можно использовать для заголовков, а значение pretty для основного текста. Однако, стоит учитывать, что сейчас данные возможности поддерживаются не всеми браузерами. Подробнее про поддержку можно посмотреть на MDN.

www.tgoop.com/startpoint_dev/102

276 viewsAnastasia Kotova, Oct 21, 2024 at 09:18

Все вы знаете свойство text-wrap, с помощью которого можно указать, переносить текст в контейнере или нет. Однако у этого свойства есть два интересных параметра: balance и pretty.

Параметр balance помогает сбалансировать строки текста так, чтобы обеспечить равномерное распределение слов по строкам. Сравните отображение с text-wrap: wrap и text-wrap: balance. Однако, это свойство работает только для коротких текстов (меньше 6 или 10 строк, в зависимости от браузера).

Параметр pretty наоборот предназначен для длинных текстовых блоков, где хорошая типографика важнее производительности. Он делает множество улучшений, связанных с переносами, в частности предотвращает появление одиноких слов в конце абзаца. Сравните отображение с text-wrap: wrap и text-wrap: pretty для длинного текста.

Таким образом, значение balance можно использовать для заголовков, а значение pretty для основного текста. Однако, стоит учитывать, что сейчас данные возможности поддерживаются не всеми браузерами. Подробнее про поддержку можно посмотреть на MDN.

BY Настя Котова // Frontend & Node.js