Вертикальное направление текста

Question

Я пытался текст, чтобы идти в вертикальном направлении, как мы можем сделать в таблицах ms-word, но до сих пор я был в состоянии сделать только ЭТО ... что меня не устраивает, потому чтоэто коробка повернута ... Разве нет способа получить фактический текст в вертикальном направлении?

Я установил поворот на 305 градусов в демо, что не делает текст вертикальным.270deg будет, но я только сделал демонстрацию, чтобы показать вращение.

Answer 1

Альтернативный подход: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

Answer 2

-webkit-transform: rotate(90deg);

Другие ответы верны, но они привели к некоторым проблемам с выравниванием. Испытывая разные вещи, этот CSS-код отлично работал для меня.

.vertical{
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
    height:20px;
}

Answer 3

Я искал реальный вертикальный текст, а не повернутый текст в HTML, как показано ниже.Так что я мог бы добиться этого, используя следующий метод.

HTML: -

<p class="vericaltext">
Hi This is Vertical Text!
</p>

CSS: -

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
}

JSFiddle!Демонстрация.

Обновление: - Если вам нужно отобразить пробелы , добавьте следующее свойство к вашему CSS.

white-space: pre;

Итак, класс css должен быть

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space: pre;/* this is for displaying whitespaces */
}

JSFiddle!Демонстрация с пробелами

Обновление 2 (28 июня 2015 г.)

Поскольку white-space: pre; не работает (для этого конкретного использования)в Firefox (на данный момент) просто измените эту строку на

white-space: pre-wrap;

Итак, класс css должен быть

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/
}

Совместимость с JsFiddle Demo FF.

Answer 4

Чтобы повернуть текст на 90 градусов:

-webkit-transform: rotate(90deg);   
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

Кроме того, кажется, что тег span нельзя повернуть, если не установлен display: block.

Answer 5

Для вертикального текста с символами один под другим в Firefox используйте:

text-orientation: upright;
writing-mode: vertical-rl;

Answer 6

Попробуйте использовать:

writing-mode: lr-tb;

Answer 7

Я новичок в этом, мне это очень помогло.Просто измените ширину, высоту, верх и левый угол, чтобы он соответствовал:

.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}

Вы также можете перейти здесь и увидеть другой способ сделать это.Автор делает это так:

.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}

Answer 8

Может использовать свойство CSS3 Transform

.txtdiv{
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
  -webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}

Answer 9

Добавьте класс

.rotate {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);

}

Я пользуюсь этим почти каждый день, и у меня не было никаких проблем с ним./ текст-вращение /

Answer 10

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}

<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>