Как повернуть текст в css - программирование

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

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

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

Ответы

Ответ 1

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

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

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

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

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

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

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

Ответ 2

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

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

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
}

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

Ответ 3

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

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

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

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