Свойство CSS `text-box-trim`

Свойство text-box-trim CSS указывает, какие из верхнего и нижнего краёв текстового содержимого следует обрезать в блочном контейнере текстового элемента.

Синтаксис

/* Keywords */
text-box-trim: none;
text-box-trim: trim-both;
text-box-trim: trim-start;
text-box-trim: trim-end;

/* Global values */
text-box-trim: inherit;
text-box-trim: initial;
text-box-trim: revert;
text-box-trim: revert-layer;
text-box-trim: unset;

Значение

Значение свойства text-box-trim можно указать одним из следующих ключевых слов:

none

Значение по умолчанию. Пробелы вокруг текста не обрезаются.

trim-both

Обрезаются и начальный (верхний), и конечный (нижний) края.

trim-start

Обрезается начальный (верхний) край.

trim-end

Обрезается конечный (нижний) край.

Описание

Свойство text-box-trim указывает, какие из верхнего и нижнего краёв текстового содержимого следует обрезать в блочном контейнере текстового элемента.

Вертикальные интервалы различаются в зависимости от шрифта, что исторически затрудняло единообразный набор текста в интернете. Свойство text-box-trim вместе со связанным свойством text-box-edge, которое задаёт величину обрезаемого пространства, упрощает создание равномерных вертикальных интервалов в тексте.

Высота содержимого, состоящего только из текста, зависит от высоты шрифта. В цифровых файлах шрифтов в эту высоту входят все символы, в том числе заглавные буквы, восходящие и нисходящие элементы и т. д. У разных шрифтов разная базовая высота строки, а значит, строки текста с одинаковым font-size образуют блоки строк разной высоты, что влияет на вид интервалов между строками.

Свойство text-box-trim позволяет обрезать верхний и нижний края блочного контейнера текста, упрощая управление интервалами текста в направлении блока.

Фактическая величина обрезаемого пространства задаётся с помощью свойства text-box-edge. Например, можно обрезать верхний край по верхней границе заглавных или строчных букв шрифта, а нижний край выровнять по базовой линии шрифта.

Свойство text-box-trim, а также свойство text-box-edge можно задать с помощью сокращённого свойства text-box.

Формальное определение

Формальный синтаксис

text-box-trim = 
  none |
  trim-start |
  trim-end |
  trim-both

Примеры

Основы использования text-box-trim

В следующем примере мы задаём text-box-edge: cap alphabetic для двух абзацев. Это обрезает верхний край блочных контейнеров текстовых элементов по верхней границе заглавных букв, а нижний край выравнивает по базовой линии текста.

Затем для первого абзаца мы задаём значения trim-end свойства text-box-trim, а для второго — trim-both. В результате у первого абзаца обрезается только нижний край, а у второго — и верхний, и нижний.

<p class="one">This is .one</p>

<p class="two">This is .two</p>

html {
  font-family: sans-serif;
  height: 100%;
}

body {
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 100px;
}

p {
  margin: 0;
  font-size: 6rem;
  font-weight: bold;
}

p {
  text-box-edge: cap alphabetic;
  border-top: 5px solid magenta;
  border-bottom: 5px solid magenta;
}

.one {
  text-box-trim: trim-end;
}

.two {
  text-box-trim: trim-both;
}

Результат

Результат выглядит следующим образом. Обратите внимание, что мы добавили верхнюю и нижнюю границы каждого абзаца, чтобы было видно, как именно обрезается пространство.

Интерактивное сравнение значений text-box-trim и text-box-edge

В этом примере представлен пользовательский интерфейс, позволяющий выбрать значения text-box-trim и text-box-edge, применяемые к абзацу текста.

HTML

В HTML мы добавили три основных элемента:

• Три элемента <select>, позволяющие выбрать, какие края абзаца нужно обрезать (значение text-box-trim), а также сколько пространства обрезать от начального и конечного краёв блока абзаца (значение text-box-edge).
• Элемент <p> с текстом, к которому применяются значения text-box-*. Для этого абзаца задан атрибут contenteditable, поэтому текст можно редактировать.
• Элемент <output>, отображающий объявления text-box-*, применённые к абзацу. Его содержимое обновляется при выборе значения.

Также мы подключаем шрифт из сервиса Google Fonts и применяем его к тексту примера.

Для краткости мы скрыли точный HTML-код.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
  rel="stylesheet" />
<section>
  <div>
    <label for="box-trim">Select edge(s) to trim:</label>
    <select id="box-trim">
      <option>none</option>
      <option>trim-start</option>
      <option>trim-end</option>
      <option selected>trim-both</option>
    </select>
  </div>
  <div>
    <label for="trim-over">Select trim over (start) value:</label>
    <select id="trim-over">
      <option>text</option>
      <option selected>cap</option>
      <option>ex</option>
    </select>
  </div>
</section>
<p class="display" contenteditable>Holly Golightly</p>
<section>
  <div>
    <label for="trim-under">Select trim under (end) value:</label>
    <select id="trim-under">
      <option>text</option>
      <option selected>alphabetic</option>
    </select>
  </div>
</section>
<output></output>

CSS

В CSS мы применяем подключённый шрифт к элементу <html> и размещаем элементы интерфейса с помощью flexbox. Для краткости большая часть кода CSS скрыта, но ниже приведены правила для абзаца, к которому применяются эффекты text-box-*, и для элемента <output>, отображающего применённые правила text-box-*:

html {
  font-family: "Roboto", sans-serif;
  height: 100%;
}

body {
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
}

section {
  display: flex;
  justify-content: space-between;
}

section:nth-of-type(2) {
  justify-content: flex-end;
  padding-bottom: 30px;
}

select {
  width: 6rem;
}

p {
  margin: 0;
  font-size: 6rem;
  font-weight: bold;
  border-top: 5px solid magenta;
  border-bottom: 5px solid magenta;
}

output {
  border: 2px solid gray;
  border-radius: 10px;
  padding: 10px;
  margin: 0;
  width: fit-content;
}

И снова обратите внимание, что у абзаца .display есть верхняя и нижняя границы: по ним можно увидеть, как меняется обрезаемое пространство при выборе разных значений text-box-*.

JavaScript

В JavaScript сначала получим ссылки на три элемента <select> и два элемента <p>:

const boxTrimSelect = document.getElementById("box-trim");
const trimOverSelect = document.getElementById("trim-over");
const trimUnderSelect = document.getElementById("trim-under");

const displayElem = document.querySelector("p");
const codeElem = document.querySelector("output");

Затем определим функцию с именем setEdgeTrim(). Она задаёт абзацу значение text-box на основе значений элементов <select>, а также выводит применённые объявления (как в полной, так и в сокращённой форме):

function setEdgeTrim() {
  const textBoxTrimValue = boxTrimSelect.value;
  const textBoxEdgeValue = `${trimOverSelect.value} ${trimUnderSelect.value}`;
  displayElem.style.textBox = `${textBoxTrimValue} ${textBoxEdgeValue}`;

  codeElem.innerHTML = `
    <span><code>text-box-trim: ${textBoxTrimValue}</code></span>
    <br>
    <span><code>text-box-edge: ${textBoxEdgeValue}</code></span>
    <br><br>
    <span>Shorthand equivalent:</span>
    <br><br>
    <span><code>text-box: ${textBoxTrimValue} ${textBoxEdgeValue}</code></span>
  `;
}

В заключительной части JavaScript мы один раз вызываем функцию setEdgeTrim(), чтобы задать начальное состояние интерфейса. Затем для всех элементов <select> с помощью addEventListener добавляются обработчики события change. Благодаря этому setEdgeTrim() запускается при каждом изменении значения <select>, обновляя интерфейс соответствующим образом:

setEdgeTrim();

boxTrimSelect.addEventListener("change", setEdgeTrim);
trimOverSelect.addEventListener("change", setEdgeTrim);
trimUnderSelect.addEventListener("change", setEdgeTrim);

Результат

Результат выглядит следующим образом:

Изначально для text-box-trim задано значение trim-both, поэтому у абзаца обрезаются и верхний, и нижний края. Изначально для text-box-edge задано значение cap alphabetic, поэтому текст обрезается по верхней границе заглавных букв у начального края и по базовой линии у конечного края.

Попробуйте изменить значения <select>, чтобы увидеть, как они влияют на отображаемый текст.

Спецификации

Совместимость с браузерами

См. также

• text-box, text-box-edge
• встроенная компоновка CSS, модуль
• CSS text-box-trim на developer.chrome.com (2025)