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

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

Синтаксис

/* Single keyword */
text-box-edge: auto;
text-box-edge: text;

/* Two <text-edge> values */
text-box-edge: text text;
text-box-edge: text alphabetic;
text-box-edge: cap alphabetic;
text-box-edge: ex text;

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

Значение

Значение свойства text-box-edge задаётся как auto или значение <text-edge>:

auto

Значение по умолчанию. Эквивалентно значению text-edge text.

<text-edge>

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

• Допустимые значения для обрезки верхнего края: text, cap и ex.
• Допустимые значения для обрезки нижнего края: text и alphabetic.

Если указано одно значение, оно определяет поведение обрезки и верхнего, и нижнего края. На момент написания допустимым единственным значением является text.

Описание

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

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

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

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

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

Эти свойства значительно упрощают управление интервалами текста в блочном направлении.

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

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

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

text-box-edge = 
  auto |
  <text-edge>

<text-edge> = 
  [ text | cap | ex | ideographic | ideographic-ink ] [ text | alphabetic | ideographic | ideographic-ink ]?

Примеры

Основные случаи использования text-box-edge

Наиболее распространённые значения text-box-edge, которые используются в языках с горизонтальным writing-mode, таких как английский или арабский, — это cap alphabetic и ex alphabetic. Значение cap обрезает верхний край блочного контейнера текстового элемента до верхней границы заглавных букв, а ex обрезает верхний край до высоты строчных букв (верхней границы строчных букв без выносных элементов). В обоих случаях значение alphabetic обрезает нижний край вровень с базовой линией текста.

В этом примере показано действие обоих распространённых значений на двух элементах <p>. Кроме того, для обоих задано значение trim-both свойства text-box-trim, чтобы обрезать начальный и конечный края.

<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-trim: trim-both;
  border-top: 5px solid magenta;
  border-bottom: 5px solid magenta;
}

.one {
  text-box-edge: cap alphabetic;
}

.two {
  text-box-edge: ex alphabetic;
}

Результат

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

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

Полный интерактивный пример text-box-edge см. на странице text-box-trim.

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

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

См. также

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