Кажется, что вертикальный текст имеет невидимый низ и создает новый блок. ⇐ CSS

[Anonymous]

Я экспериментирую с вертикальным текстом в своем проекте реагирования
У меня есть этот столбец

Код: Выделить всё

    
アイ アム コーディング イン リアクト

который использует следующий стиль

Код: Выделить всё

.japanese-text {
color: antiquewhite;
font-family: 'Yuji Syuku', serif;
font-weight: 500;
font-size: 40px;
line-height: 1;
border-right: 2px solid white;
border-image: linear-gradient(to bottom, #181818, #eee, #181818) 1 100%;
writing-mode: vertical-rl;
text-orientation: upright;
}

.japanese-text span {
border-radius: 50%;
padding: 5px 5px;
background: #981818;
border: 2px solid #981818;
}

Как видите, по сравнению с обычным текстом в соседнем столбце, вертикальный текст по какой-то причине обрезается и создает новый вертикальный блок при достижении определенного количества символов. Единственный способ предотвратить это — уменьшить размер шрифта.


Но вот еще одна странная деталь.
Если я открываю и закрываю инструменты разработчика в Chrome, текст выравнивается правильно


Я был бы признателен, если бы кто-нибудь знал, что вызывает такое поведение.

Подробнее здесь: https://stackoverflow.com/questions/792 ... -new-block