Как повернуть текст на 90 градусов css
Для того чтобы повернуть текст на 90 градусов, в CSS существуют свойства: transform и transform-origin , с помощью которых мы задаем направление текста и угол поворота. Например:
class="wrapper"> class="text-block"> Hello World! .wrapper width: 300px; margin: 80px; > .text-block h1 transform-origin: top left; transform: rotate(90deg); > Поворот текста вертикально при помощи css
Нужно повернуть текст вертикально и расположить справа/слева возле изображения/текста. Реализовал при помощи следующего кода:
.vertical_text
Возникает проблема, необходимо абсолютно позиционировать этот блок текста по отношению к блоку с изображением и величина смещения зависит от длинны строки текста. Я так понимаю что браузер считает что текст остался в прежнем горизонтальном состоянии и берет отсчет от этого положения. Сама проблема заключается в том что под каждый блок текста приходится добавлять свой стиль со своим горизонтальным смещением чтобы подогнать его к изображению/тексту, пытаюсь найти универсальное решение для всех случаев. Пример на фото:
Отслеживать
задан 8 окт 2017 в 17:39
197 1 1 золотой знак 2 2 серебряных знака 16 16 бронзовых знаков
Как повернуть текст на 90 градусов в CSS кросс-браузерно?
Для задания вертикальной ориентации текста, применимой в большинстве браузеров, используется свойство CSS writing-mode . Данное свойство при значении writing-mode: vertical-lr; обеспечивает отображение текста в вертикальном направлении. Приведён ниже простой пример его использования:
Скопировать код
.vertical-text < writing-mode: vertical-lr; /* Прощай, горизонтальное однообразие! */ >После этого добавьте класс в ваш HTML-тег:
Скопировать код
Таким образом, достигается совместимость вертикального текста с различными браузерами.
Расширяем возможности свойства writing-mode
Свойство writing-mode безусловно полезно для изменения направления текста, однако иногда возникает необходимость повернуть текст на определённый угол, чтобы добиться интересного визуального эффекта. Тогда можно использовать следующий код:
Скопировать код
.vertical-text-rotated < transform: rotate(90deg); /* Поворачиваем текст на 90 градусов! */ transform-origin: center; >Чтобы сохранить совместимость со старыми версиями Internet Explorer (да, их тоже стоит учесть):
Скопировать код
.vertical-text-rotated < filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* Помогаем повернуться старому другу IE! */ >Используйте caniuse.com для проверки поддержки свойств и не забывайте про вендорные префиксы:
Скопировать код
.vertical-text-rotated < -webkit-transform: rotate(90deg); /* Привет, WebKit! */ -moz-transform: rotate(90deg); /* Вперёд, Mozilla! */ -ms-transform: rotate(90deg); /* Не забываем о старом верном Microsoft */ -o-transform: rotate(90deg); /* И Opera тоже в деле */ transform: rotate(90deg); /* Для новаторов мира браузеров */ >Точность и совместимость
Настройка позиционирования текста
Если вам нужно повернуть только одно слово или букву, хорошим решением будет использование строчных элементов:
Скопировать код
Несколько
Скопировать код
.rotated < display: inline-block; transform: rotate(90deg); /* Небольшие изюзминки добавляют тексту фишечки! */ >SVG для детального позиционирования
Если требуется высокая точность оформления, то подойдёт SVG для размещения текста:
Скопировать код
SVG позволяет применять атрибуты text-anchor и alignment-baseline для точного выравнивания и поворота текста.
Старые версии IE требуют особого внимания
Даже Internet Explorer версий 6-8 заслуживает нашего внимания. Для этих версий браузера условные комментарии и свойство filter могут служить решением проблем с совместимостью:
Скопировать код
Похожие публикации: