doka-guide · solarrust · Sep 20, 2024 · Jul 17, 2024 · Jul 17, 2024 · Jul 17, 2024
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Сравнение разных значений — text-wrap — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap">
+  <style>
+    *,
+    *::before,
+    *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      block-size: 100%;
+    }
+
+    body {
+      min-block-size: 100%;
+      padding: 50px;
+      display: grid;
+      place-items: center;
+      background-color: #18191c;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+      font-size: 16px;
+    }
+
+    code {
+      font-family: "Roboto Mono", monospace;
+      font-size: calc(1em - 1px);
+    }
+
+    h1 {
+      font-size: 26px;
+      font-weight: 500;
+      text-align: right;
+    }
+
+    .option-container {
+      display: flex;
+      align-items: flex-end;
+      margin-block-start: 30px;
+    }
+
+    .option-title {
+      margin-inline-end: 50px;
+      text-align: right;
+    }
+
+    h1,
+    .option-title {
+      inline-size: 150px;
+    }
+
+    .option {
+      inline-size: 340px;
+      padding: 35px 20px;
+      background-color: #2E9AFF;
+    }
+
+    mark {
+      background-color: #2E9AFF;
+    }
+
+    .wrap {
+      text-wrap: wrap;
+    }
+
+    .nowrap {
+      text-wrap: nowrap;
+    }
+
+    .balance {
+      text-wrap: balance;
+    }
+
+    .pretty {
+      text-wrap: pretty;
+    }
+
+    .stable {
+      text-wrap: stable;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        display: block;
+        padding: 30px;
+      }
+
+      .option-container {
+        display: block;
+        overflow: scroll;
+      }
+
+      h1,
+      .option-title {
+        inline-size: 100%;
+      }
+
+      .option-title {
+        display: block;
+        margin-inline-end: 0;
+        margin-block-end: 10px;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="parent">
+    <h1><code>text-wrap</code></h1>
+    <div class="option-container">
+      <span class="option-title"><code>wrap</code></span>
+      <p class="option wrap"><mark>— Мне нужна ваша одежда, ботинки и мотоцикл.
+        <br>— Ты забыл сказать «пожалуйста».</mark>
+      </p>
+    </div>
+    <div class="option-container">
+      <span class="option-title"><code>nowrap</code></span>
+      <p class="option nowrap"><mark>— Мне нужна ваша одежда, ботинки и мотоцикл.
+        <br>— Ты забыл сказать «пожалуйста».</mark>
+      </p>
+    </div>
+    <div class="option-container">
+      <span class="option-title"><code>balance</code></span>
+      <p class="option balance"><mark>— Мне нужна ваша одежда, ботинки и мотоцикл.
+        <br>— Ты забыл сказать «пожалуйста».</mark>
+      </p>
+    </div>
+    <div class="option-container">
+      <span class="option-title"><code>pretty</code></span>
+      <p class="option pretty"><mark>— Мне нужна ваша одежда, ботинки и мотоцикл.
+        <br>— Ты забыл сказать «пожалуйста».</mark>
+      </p>
+    </div>
+    <div class="option-container">
+      <span class="option-title"><code>stable</code></span>
+      <p class="option stable"><mark>— Мне нужна ваша одежда, ботинки и мотоцикл.
+        <br>— Ты забыл сказать «пожалуйста».</mark>
+      </p>
+    </div>
+  </div>
+</body>
+
+</html>
@@ -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;
+}
+```
+
+<iframe title="Сравнение разных значений" src="demos/basic/" height="920"></iframe>
+
+Значение `balance` помогает сохранять текст визуально привлекательным и разборчивым, независимо от того, просматривает ли пользователь контент на большом мониторе или на маленьком экране мобильного телефона.
+
+## Производительность
+
+Не рекомендуется применять значение `balance` для больших блоков текста. Несмотря на то, что это значение оказывает видимый эффект только на ограниченное число строк, браузер всё равно будет пытаться рассчитать баланс для всех остальных, и это скажется на скорости рендеринга страницы. Лучше применять его для заголовков, цитат и других визуально значимых блоков текста.
+
+Значение `pretty` не имеет таких ограничений.
+
+## `balance` + `white-space`
+
+`text-wrap: balance` вступает в противоречие со свойством [`white-space`](/css/white-space/), поскольку первое требует сбалансированных переносов, а второе — их отсутствия. Чтобы решить эту проблему, задайте для `white-space` значение `unset`, после чего балансировка количества символов в строке снова будет работать.
+