П овёрнутый текст
Некоторое время назад я уже делился этим решением в соцсетях, но на этот раз хочу написать о нём немного подробнее.
Задача: получить повёрнутый на 90 градусов текст.
Проблема: широко известно, что при использовании transform , блок ведёт себя аналогично сдвигу через position:relative — продолжает занимать место в потоке по состоянию до трансформации, так что, по факту, изменение происходит только визуальное.
Однако, довольно часто можно захотеть повернуть блок так, чтобы этот поворот влиял и на поток. Например, если мы захотим выстроить несколько вертикальных блоков в ряд, подобно книгам на полке, или если мы захотим использовать повёрнутый текст в качестве заголовков таблицы — в этих случаях нам нужно будет гарантировать, что высота станет равна ширине блока, в то время как ширина — высоте.
У меня получилось решить эту задачу с одним допущением: нужно знать высоту поворачиваемого элемента. В этом случае реализация становится очень простой:
-
Нам понадобится дополнительный элемент. HTML каждого блока будет примерно таким:
.rotated-text
.rotated-text__inner
.rotated-text__inner:after
В итоге мы получаем квадратный элемент, обрезаемый враппером до ширины своей прошлой высоты, такой элемент можно использовать в любом контексте, для него будут работать разные свойства вроде text-align или vertical-align , так что можно сказать, мы получили «честный» повёрнутый блок.
Ну и несколько живых примеров:
З аголовки таблиц
Очевидный пример — компактные по ширине заголовки таблиц.
| First th | Some cell | And another |
|---|---|---|
| Second th | 12 | 12314 |
| Third th | 12 | 12314 |
| First th | The Second th | Third th |
|---|---|---|
| 2 | 4 | 42 |
| 12 | 4 | 234 |
| 13 | 100 | 0 |
«Книжная полка»
Так как повёрнутые блоки получаются «честными», то, если выстроить их в ряд, высота ряда будет равна высоте самого большего из них:
- The Idiot
- The Little Prince
- Roadside Picnic
- Flowers for Algernon
- A Book of Five Rings
- The Glass Bead Game
- The Hitchhiker’s Guide to the Galaxy
- The Hobbit
- One Flew Over the Cuckoo’s Nest
- 1984
- Mother Night
- Speaker for the Dead
- The Day of the Triffids
Ещё раз: мы должны знать высоту блока, так что, если понадобится поворачивать таким образом многострочные блоки, нужно будет соответствующим образом изменять ширину их врапперов.
Кроме того, возможно, этот метод можно заставить работать и в IE — применив матричный фильтр для поворота и добавив элемент в замену псевдоэлементу. Мне лень всё это делать, но вы можете всегда попробовать это сделать сами 🙂
Как повернуть текст на 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 повернуть текст против часовой стрелки на определенный градус? [закрыт]
Закрыт. Этот вопрос необходимо уточнить или дополнить подробностями. Ответы на него в данный момент не принимаются.
Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.
Закрыт 2 года назад .
Как с помощью CSS добиться такого же эффекта, как на картинке: повернуть текст на 45 градусов против часовой стрелки?
Отслеживать
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак
задан 27 июл 2021 в 17:50
1 1 1 бронзовый знак
rotate(a) a-угол
27 июл 2021 в 17:51
27 июл 2021 в 18:00
28 июл 2021 в 10:56
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Прочитайте про css свойство transform. Конкретно этот случай будет решён так:
.text
2021Отслеживать
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак
ответ дан 27 июл 2021 в 18:29
Иван Ипатов Иван Ипатов
774 5 5 серебряных знаков 23 23 бронзовых знака
-
Важное на Мете
Похожие
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Вертикальный текст в заголовках таблиц HTML + CSS
Визуализация таблиц на сайте, особенно на мобильных устройствах, всегда приключение. В теории все выглядит хорошо, а в реальности – либо данные в таблице занимают много места и остальные колонки сжимаются, либо заголовки содержат много слов и выглядят не красиво.
Таблицы очень тяжело переносят уменьшение размеров экрана. Приходится применять горизонтальную прокрутку, чтобы отобразить таблицу. И если это решает проблему с длинными таблицами, то проблема с заголовками таблиц остается. Сегодня мы научимся делать вертикальные заголовки для таблицы что позволит разумно расходовать место, и соответствует гостам оформления таблиц для печатных изданий (если вам это важно).
В любом случае, ни одна админ панель не обходится без табличных данных. Бизнес очень любит таблицы и навыки их верстки – очень важны для frontend разработчика.
Для проекта – создадим файл HTML и разместим в него таблицу с реальными данными. Я воспользовался структурой проекта Bootstrap.
Обратите внимание – все классы взяты из Bootstrap. Те данные, которые нужно развернуть на 90 градусов, обернем в .rotate-sm-90 . Конечно же, название класса можно заменить на то, которое понравится вам. В принципе, вместо span можно применять любой тег, однако нам показалось логично применить именно span .
Теперь – перейдем в файл style.css и внесем стили для класса .rotate-sm-90 .
.rotate-sm-90
Свойство writing-mode отвечает за то, как браузер должен отображать написание текста. Не забывайте, что существуют языки, которые пишутся справа налево и сверху вниз. Обратите внимание что у данного свойства много значений, но часть из них экспериментальные, а часть – устарели. И для вертикального выравнивания остается два свойства: vertical-lr и vertical-rl .
Оба эти свойства применяются и делают текст вертикальным, однако текст отображается сверху вниз, а нам нужно наоборот. Добавим трансформацию и получим нужный результат:
.rotate-sm-90
Осталось дописать медиазапрос, чтобы на большом экране заголовки таблицы размещались горизонтально, а на мобильных устройствах текст в заголовке становился вертикальным:
@media (max-width: 768px) < .rotate-sm-90 < font-size: 1rem; writing-mode:vertical-lr; transform: rotate(180deg); >>
И сравните результат на десктопе:
Прочитать про writing-mode : Mozilla Developer