CSS-свойство `text-combine-upright`

Базовая поддержка Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она поддерживается браузерами с марта 2022 года.

Свойство text-combine-upright CSS задаёт объединение символов в пространство одного символа. Если ширина объединённого текста превышает 1em, пользовательский агент должен уместить содержимое в пределах 1em. Полученная композиция рассматривается как единый вертикально ориентированный глиф при компоновке и оформлении. Это свойство действует только в вертикальных режимах письма.

С его помощью создают эффект, известный как татэ-тю-йоко 縦中横 в японском языке или как 橫向文字 в китайском.

Попробуйте

text-combine-upright: none;

text-combine-upright: all;

<section class="default-example" id="default-example">
  <div>
    <p>
      <span class="transition-all" id="example-element"
        >2022<span>年</span>12<span>月</span>8</span
      >日から楽しい
    </p>
  </div>
</section>

p {
  writing-mode: vertical-rl;
}

Синтаксис

/* Keyword values */
text-combine-upright: none;
text-combine-upright: all;

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

Значения

Это свойство задаётся одним из следующих ключевых слов:

none: Специальная обработка не применяется.
all: Предпринимается попытка расположить все идущие подряд символы в блоке горизонтально так, чтобы они занимали пространство одного символа в вертикальной строке блока.

Примечание: Модуль CSS Writing Modes определяет значение digits <integer> для свойства text-combine-upright, позволяющее отображать от двух до четырёх идущих подряд цифр ASCII (U+0030–U+0039) так, чтобы они занимали пространство одного символа в вертикальной строке блока. Однако ни один браузер это значение не поддерживает.

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

Исходное значение	none
Применяется к	встроенным незамещаемым элементам
Наследуется	да
Вычисленное значение	заданное ключевое слово, а также целое число, если указано 'digits'
Тип анимации	Не анимируется

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

text-combine-upright = 
  none |
  all |
  [ digits <integer>? ]

<integer> = 
  <number-token>

Примеры

Использование 'all' с горизонтальным текстом

Для значения all требуется разметка вокруг каждого фрагмента горизонтального текста, однако сейчас оно поддерживается большим числом браузеров, чем значение digits.

HTML

<p lang="zh-Hant">
  民國<span class="num">105</span>年<span class="num">4</span>月<span
    class="num"
    >29</span
  >日
</p>

CSS

html {
  writing-mode: vertical-rl;
  font: 24px serif;
}
.num {
  text-combine-upright: all;
}

Результаты

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

Спецификация
CSS Writing Modes Level 4 # text-combine-upright

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`text-combine-upright`	48 9 Согласно версии спецификации CSS3 Writing Modes за 2011 год, это свойство изначально называлось `-webkit-text-combine` и поддерживало значения `none` и `horizontal` без `digits`.	79 12–79	48 До версии 81 Firefox реализовывал это свойство как анимируемое. В версии 81 поведение было приведено в соответствие со спецификацией.	35 15 Согласно версии спецификации CSS3 Writing Modes за 2011 год, это свойство изначально называлось `-webkit-text-combine` и поддерживало значения `none` и `horizontal` без `digits`.	15.4 5.1 Согласно версии спецификации CSS3 Writing Modes за 2011 год, это свойство изначально называлось `-webkit-text-combine` и поддерживало значения `none` и `horizontal` без `digits`.	48 18 Согласно версии спецификации CSS3 Writing Modes за 2011 год, это свойство изначально называлось `-webkit-text-combine` и поддерживало значения `none` и `horizontal` без `digits`.	48 До версии 81 Firefox для Android реализовывал это свойство как анимируемое. В версии 81 поведение было приведено в соответствие со спецификацией.	35 14 Согласно версии спецификации CSS3 Writing Modes за 2011 год, это свойство изначально называлось `-webkit-text-combine` и поддерживало значения `none` и `horizontal` без `digits`.	15.4 5 Согласно версии спецификации CSS3 Writing Modes за 2011 год, это свойство изначально называлось `-webkit-text-combine` и поддерживало значения `none` и `horizontal` без `digits`.	5.0 1.0 Согласно версии спецификации CSS3 Writing Modes за 2011 год, это свойство изначально называлось `-webkit-text-combine` и поддерживало значения `none` и `horizontal` без `digits`.	48 4.4 Согласно версии спецификации CSS3 Writing Modes за 2011 год, это свойство изначально называлось `-webkit-text-combine` и поддерживало значения `none` и `horizontal` без `digits`.	15.4 5 Согласно версии спецификации CSS3 Writing Modes за 2011 год, это свойство изначально называлось `-webkit-text-combine` и поддерживало значения `none` и `horizontal` без `digits`.
`all`	48	79	48	35	15.4	48	48	35	15.4	5.0	48	15.4
`none`	48	79	48	35	15.4	48	48	35	15.4	5.0	48	15.4

См. также

writing-mode, text-orientation

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-combine-upright