Как правильно повернуть текст в HTML/CSS?
Использую writing-mode: sideways-lr; , но как оказалось это не самый лучший вариант в плане кросс-браузерности. Не могу разобраться почему в этом случае rotate() не работает. На первом скрине, как должно, а на втором, как получается. 
Отслеживать
Семён Голган
задан 22 янв 2022 в 14:40
Семён Голган Семён Голган
15 4 4 бронзовых знака
Что значит «не работает»? На скриншоте всё повёрнуто — значит, видимо, работает. Что не так?
22 янв 2022 в 14:48
Да, не так сказал) В общем получается не то, чего ожидал, не могу понять почему он залазиет за границы другого блока и вообще расположился недо-центре
22 янв 2022 в 14:52
Потому что вы задали блоку слишком маленькие размеры и текст в него чисто геометрически не может влезть, наверное?
22 янв 2022 в 15:01
Увы нет, даже если дать больше, то он все равно на N-пикселей выходит и не поддается никаким законам физики
22 янв 2022 в 15:15
Покажите соответствующий пример, а то непонятно, о чём речь
22 янв 2022 в 15:16
0
Сортировка: Сброс на вариант по умолчанию
Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.
- html
- css
- веб-программирование
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как повернуть текст в html
Для поворота текста в HTML можно использовать CSS свойство transform с значением rotate . Например, чтобы повернуть текст на 90 градусов по часовой стрелке, можно использовать следующий CSS код:
.rotate transform: rotate(90deg); > class="rotate">Повёрнутый текст
Также можно использовать значения rotateX и rotateY для поворота текста вокруг осей X и Y соответственно.
writing-mode
Устанавливает направление текста на странице. Свойство writing-mode является универсальным и позволяет одновременно задавать значения свойств direction и block-progression .
Синтаксис
writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr
Значения
lr-tb Устанавливает направление текста слева направо. rl-tb Задает направление текста справа налево. tb-rl Текст располагается вертикально и выравнивается по верхнему и правому краю. bt-rl Текст располагается вертикально и выравнивается по нижнему и правому краю. tb-lr Текст располагается вертикально и выравнивается по верхнему и левому краю. bt-lr Текст располагается вертикально и выравнивается по нижнему и левому краю.
Влияние разных значений на положение текста в таблице показано на рис. 1.
Рис. 1. Положение текста при разных значениях writing-mode
В табл. 1 показаны значения свойств direction и block-progress , соответствующие значениям writing-mode , а также языки, где они
| writing-mode | direction | block-progress | Для каких языков |
|---|---|---|---|
| lr-tb | ltr | tb | Романских, греческого, кириллических |
| rl-tb | rtl | tb | Арабского, еврейских языков |
| tb-rl | ltr | rl | Азиатских в вертикальном написании |
| bt-rl | ltr | rl | Арабского, вставленного в азиатский документ |
| tb-lr | ltr | rl | Монгольского |
| bt-lr | rtl | rl | Арабского, вставленного в монгольский документ |
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
writing-mode table < border-collapse: collapse; height: 350px; width: 300px; >table td Текст Текст Текст Текст Текст Текст lr-tb rl-tb tb-rl bt-rl tb-lr bt-lr
Браузеры
Internet Explorer 6.0 поддерживает только значения lr-tb и tb-rl , Internet Explorer 7.0 поддерживает значения lr-tb , rl-tb , tb-rl , bt-rl .
Как перевернуть текст в html
Для трансформации HTML объектов в пространстве применяется CSS свойство transform . Данное свойство позволяет поворачивать, масштабировать, наклонять или сдвигать элементы. Для того, чтобы развернуть текст на 180 градусов, воспользуемся значением rotate .
Исходный HTML документ:
Привет! Меня перевернули!
h2 /* Поворачиваем текст */ transform: rotate(180deg); /* Закрепим итоговый результат вверху слева */ position: absolute; left: 20px; top: 20px; > 
Результат: