Как повернуть текст в CSS - PullRequest
Новая
       49

Как повернуть текст в CSS

42 голосов
/ 17 мая 2011

Как вращать текст в css, чтобы получить следующий вывод ...

enter image description here привет,

Редактировать:

Спасибо за быстрое предложение.Я добавил мой пример кода в jsfidle:

http://jsfiddle.net/koolkabin/yawYM/

Проблема, с которой я сталкиваюсь, заключается в том, что когда мы вращаем текст, он нарушает выравнивание и позиции ... так чточто и как я могу управлять ими?

Ответы [ 4 ]

42 голосов
/ 17 мая 2011

Вам необходимо использовать свойство преобразования CSS3 rotate - . См. Здесь , для которого браузеры его поддерживают, и префикс, который необходимо использовать.

Один пример для веб-браузеров: -webkit-transform: rotate(-90deg);

Редактировать: Вопрос был существенно изменен, поэтому я добавил demo , который работает в Chrome / Safari (поскольку я включил только -webkit- CSS правила с префиксом). Проблема в том, что вы не хотите вращать заголовок div , а просто текст внутри него. Если вы удалите вращение, <div> будут в правильном положении, и все, что вам нужно сделать, это обернуть текст в элемент и повернуть его вместо этого.

Уже существует более настраиваемый виджет как часть пользовательского интерфейса jQuery - см. Демонстрационную страницу accordion . Я уверен, что с некоторой сообразительностью CSS вы сможете сделать аккордеон вертикальным, а также повернуть текст заголовка: -)

Редактировать 2: Я предвидел проблему с центром текста и уже обновил мою демонстрацию . Однако существует ограничение высоты / ширины, поэтому более длинный текст может нарушить макет.

Редактировать 3: Похоже, что горизонтальная версия была частью первоначального плана , но я не вижу способа ее настройки на демонстрационной странице. Я был не прав & hellip; новый аккордеон является частью предстоящего jQuery UI 1.9! Так что вы можете попробовать разработки, если вам нужны новые функциональные возможности.

Надеюсь, это поможет!

18 голосов
/ 17 мая 2011

Я думаю, это это то, что вы ищете?

Добавлен пример:

HTML: 

<div class="example-date">
  <span class="day">31</span> 
  <span class="month">July</span> 
  <span class="year">2009</span>
</div>

CSS:

.year
{
    display:block;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); //For IE support
}

Все примеры с упомянутого сайта.

7 голосов
/ 04 мая 2018

В вашем случае лучше всего использовать параметр поворота из свойства transform, как упоминалось ранее. Существует также свойство writing-mode, которое работает как rotate (90deg), поэтому в вашем случае его следует повернуть после применения. Даже это не правильное решение в этом случае, но вы должны знать об этой собственности.

Пример: 

writing-mode:vertical-rl;

Подробнее о преобразовании: https://kolosek.com/css-transform/

Подробнее о режиме записи: https://css -tricks.com / almanac / properties / w / mode-mode /

4 голосов
/ 17 мая 2011

Вы можете использовать как это ... 

<div id="rot">hello</div>

#rot
{
   -webkit-transform: rotate(-90deg); 
   -moz-transform: rotate(-90deg);    
    width:100px;
}

Посмотрите на эту скрипку: http://jsfiddle.net/anish/MAN4g/

...