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

text-box — это CSS-сокращённое свойство, соответствующее свойствам text-box-trim и text-box-edge, которые вместе задают величину пространства, обрезаемого у начального и конечного краёв блочного контейнера текстового элемента.

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

• text-box-trim
• text-box-edge

Синтаксис

/* Single keyword */
text-box: normal;

/* One text-box-edge keyword */
text-box: trim-start text;
text-box: trim-both text;

/* Two text-box-edge keywords */
text-box: trim-start cap alphabetic;
text-box: trim-both ex text;

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

Значения

Значение text-box может состоять из значения text-box-trim и значения text-box-edge, разделённых пробелом. Описание значений см. на соответствующих страницах.

Свойство text-box также может принимать ключевое слово normal, эквивалентное значению text-box: none auto;.

Если text-box-trim не указано, оно устанавливается в trim-both. Если text-box-edge не указано, оно устанавливается в auto.

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

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

text-box = 
  normal |
  <'text-box-trim'> ||
  <'text-box-edge'>

Описание

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

Свойства text-box позволяют обрезать лишнее пространство у начального и конечного краёв блочного контейнера текстового элемента. Это пространство может включать интерлиньяж у начального и конечного краёв текстового блока, а также пространство, заданное внутри шрифта (как описано выше). Благодаря этому управлять интервалами текста в блочном направлении становится намного проще.

Примеры

Базовое использование text-box

В следующем примере представлены два элемента <p> с классами one и two.

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

Для второго абзаца мы задаём значение text-box — trim-both ex alphabetic. Значение text-box-edge — ex alphabetic — задаёт обрезку верхнего края по высоте строчных букв шрифта (верхней границе коротких строчных букв), а нижнего края — по базовой линии текста. Поскольку значение 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;
}

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

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

p {
  border-top: 5px solid magenta;
  border-bottom: 5px solid magenta;
}

Результат

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

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

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

См. также

• text-box-edge, text-box-trim
• <text-edge> — тип данных
• модуль встроенной компоновки CSS
• CSS text-box-edge на developer.chrome.com (2025)