Какие методы существуют для автоматического масштабирования текста при повороте на 90 градусов?

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

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