diff --git a/css/text-wrap/demos/basic/index.html b/css/text-wrap/demos/basic/index.html new file mode 100644 index 0000000000..77af671f2f --- /dev/null +++ b/css/text-wrap/demos/basic/index.html @@ -0,0 +1,154 @@ + + + + Сравнение разных значений — text-wrap — Дока + + + + + + + + + + +
+

text-wrap

+
+ wrap +

— Мне нужна ваша одежда, ботинки и мотоцикл. +
— Ты забыл сказать «пожалуйста». +

+
+
+ nowrap +

— Мне нужна ваша одежда, ботинки и мотоцикл. +
— Ты забыл сказать «пожалуйста». +

+
+
+ balance +

— Мне нужна ваша одежда, ботинки и мотоцикл. +
— Ты забыл сказать «пожалуйста». +

+
+
+ pretty +

— Мне нужна ваша одежда, ботинки и мотоцикл. +
— Ты забыл сказать «пожалуйста». +

+
+
+ stable +

— Мне нужна ваша одежда, ботинки и мотоцикл. +
— Ты забыл сказать «пожалуйста». +

+
+
+ + + diff --git a/css/text-wrap/images/text-wrap.png b/css/text-wrap/images/text-wrap.png new file mode 100644 index 0000000000..377d5db8da Binary files /dev/null and b/css/text-wrap/images/text-wrap.png differ diff --git a/css/text-wrap/index.md b/css/text-wrap/index.md new file mode 100644 index 0000000000..e5c5048271 --- /dev/null +++ b/css/text-wrap/index.md @@ -0,0 +1,59 @@ +--- +title: "`text-wrap`" +description: "Будет ли текст помещаться в границы контейнера?" +authors: + - anastasiayarosh +contributors: + - skorobaeus +keywords: + - баланс переноса +related: + - css/text-align + - css/white-space + - css/word-wrap +tags: + - doka +--- + +## Кратко + +Свойство `text-wrap` контролирует то, как текст расположится внутри элемента. Можно применять, например, для более сбалансированного вида заголовков, которые не вмещаются в одну строку. + +![Сравнение заголовка, в котором количество символов в строке сбалансировано, с заголовком, отрисованным стандартно](images/text-wrap.png) + +## Как пишется + +Возможные значения: + +- `nowrap` — текст не переносится по строкам. Он переполнит родительский элемент и выйдет за его пределы, а не перейдёт на новую строку. +- `balance` — текст переносится так, чтобы наилучшим образом сбалансировать количество символов в каждой строке, улучшая разборчивость и читаемость. +- `stable` — результат аналогичен `wrap`, но при редактировании текста, строки, идущие выше, остаются неподвижными, в то время как при значении по умолчанию будет перерисовываться всё содержимое. Значение поддерживается только в браузерах Safari и Firefox. +- `pretty` — результат будет таким же, как и при использовании `wrap`, за исключением того, что браузер будет использовать более медленный алгоритм, который отдает предпочтение лучшему виду, а не скорости. Предназначается для текста, где хорошая типографика предпочтительнее производительности. +Про этот алгоритм можно почитать у разработавшего его инженера [по ссылке](https://docs.google.com/document/d/1jJFD8nAUuiUX6ArFZQqQo8yTsvg8IuAq7oFrNQxPeqI/edit#heading=h.cqq9czoal00g). +Пожалуй, самое популярное преимущество этого свойства — предотвращение «сирот» («сирота» в типографике — это слово, которое переносится на новую строку, чем делает текст менее гармоничным внешне). +Свойство не поддерживается в браузерах Safari и Firefox. + +Поскольку подсчёт символов и их балансировка по нескольким строкам требует больших вычислительных затрат, это значение поддерживается только для блоков текста с ограниченным количеством строк (шесть или меньше для Chromium и десять или меньше для Firefox). + +## Пример + +```css +div { + text-wrap: wrap; +} +``` + + + +Значение `balance` помогает сохранять текст визуально привлекательным и разборчивым, независимо от того, просматривает ли пользователь контент на большом мониторе или на маленьком экране мобильного телефона. + +## Производительность + +Не рекомендуется применять значение `balance` для больших блоков текста. Несмотря на то, что это значение оказывает видимый эффект только на ограниченное число строк, браузер всё равно будет пытаться рассчитать баланс для всех остальных, и это скажется на скорости рендеринга страницы. Лучше применять его для заголовков, цитат и других визуально значимых блоков текста. + +Значение `pretty` не имеет таких ограничений. + +## `balance` + `white-space` + +`text-wrap: balance` вступает в противоречие со свойством [`white-space`](/css/white-space/), поскольку первое требует сбалансированных переносов, а второе — их отсутствия. Чтобы решить эту проблему, задайте для `white-space` значение `unset`, после чего балансировка количества символов в строке снова будет работать. +