Несколько методов для автоматического масштабирования текста при повороте на 90 градусов:

1. Использование SVG. 1 Нужно изменить четвёртое значение у viewBox, чтобы при изменении высоты экрана повёрнутое слово всегда оставалось растянутым относительно его краёв, за счёт изменения шрифта. 1
2. Применение дополнительного элемента. 2 Понадобится дополнительный элемент, например, враппер. 2 Врапперу задают стили: display: inline-block, overflow: hidden, width: 1.5em, line-height: 1.5. 2 Затем делают внутренний элемент инлайн-блочным, обрезают все выступающие части и задают ширину, равную текущей высоте блока. 2 После этого делают внутренний элемент «квадратным» — это сделает высоту конечного элемента равной ширине. 2
3. Использование CSS-свойства transform: rotate(-90deg). 34 С его помощью текст поворачивается на 90 градусов против часовой стрелки. 3 Свойство white-space: nowrap; предотвращает перенос текста, позволяя ему сохраняться в одной строке. 3