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

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

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

Ответы

Ответ 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;
}

Ответ 3

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

enter image description here 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! Demo.

Обновление:. Если вам нужно отобразить пробелы, добавьте следующее свойство в ваш 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 Compatible.

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

writing-mode: lr-tb;

Ответ 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;
}

Ответ 8

Для отображения текста по вертикали (снизу вверх) мы можем просто использовать:

writing-mode: vertical-lr; 

transform: rotate(180deg);


#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}
<div id="myDiv"> 

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

</div>

Ответ 9

ротация, как и вы, - это путь, но обратите внимание, что не все браузеры поддерживают это. если вы не получите кросс-браузерное решение, вам придется создавать для этого фотографии.

Ответ 10

Может использовать свойство 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 */
}

Ответ 11

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

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

}

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

https://css-tricks.com/snippets/css/text-rotation/

Ответ 12

Вот пример некоторого SVG-кода, который я использовал для получения трех строк вертикального текста в заголовке столбца таблицы. Другие углы возможны с небольшой настройкой. Я считаю, что большинство браузеров поддерживают SVG в эти дни.

<svg height="150" width="40">
  <text font-weight="bold" x="-150" y="10" transform="rotate(-90 0 0)">Jane Doe</text>
  <text x="-150" y="25" transform="rotate(-90 0 0)">0/0&nbsp;&nbsp;&nbsp;&nbsp;0/0</text>
  <text x="-150" y="40" transform="rotate(-90 0 0)">2015-06-06</text>
  Sorry, your browser does not support inline SVG.
</svg>

Ответ 13

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}
<div id="myDiv"> 

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

</div>

Ответ 14

Это также работает:

transform: rotate(90deg);

Ответ 15

Лучшим решением было бы использовать writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Он определяет, будут ли строки текста выложены горизонтально или вертикально, а также направление, в котором продвигаются блоки.

У этого есть хорошая поддержка браузера, но не будет работать на IE8 (если Вы заботитесь об IE) http://caniuse.com/#feat=css-writing-mode

Ответ 16

У меня есть рабочее решение с этим:

(У меня есть заголовок внутри класса div по-русски)

.middleItem > .title{
    width: 5px;
    height: auto;
    word-break:break-all;
    font-size: 150%;
}

Ответ 17

Вы можете достичь того же с помощью следующих свойств CSS:

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

Ответ 18

Вы можете использовать word-wrap: break-word для получения вертикального текста используйте следующий сниппет

HTML:

<div class='verticalText mydiv'>Here is your text</div>

CSS

.verticalText {
word-wrap: break-word;
  font-size: 18px;
}
.mydiv {
  height: 300px;
  width: 10px;
}

Ответ 19

<style>
    #text_orientation{
        writing-mode:tb-rl;
        transform: rotate(90deg);
        white-space:nowrap;
        display:block;
        bottom:0;
        width:20px;
        height:20px;
    }
</style>
</head>
<body>

<p id="text_orientation">Welcome</p>
</body>

Ответ 20

h1{word-break:break-all;display:block;width:40px;}

H E L L O

ПРИМЕЧАНИЕ. Поддерживаемый браузер - браузер IE (8,9,10,11) - браузер Firefox (38,39,40,41,42,43,44) - браузер Chrome (44,45,46,47,48) - браузер Safari (8,9) - браузер Opera (не поддерживается) - Android-браузер (44)

Ответ 21

Попробуйте использовать SVG файл, он, кажется, имеет лучшую совместимость с браузером и не нарушит ваши гибкие проекты.

Я попробовал преобразование CSS и имел большие проблемы с источником transform; и в итоге появился файл SVG. Это заняло 10 минут, и я тоже мог немного контролировать его с помощью CSS.

Вы можете использовать Inkscape для создания SVG, если у вас нет Adobe Illustrator.

Ответ 22

Вы можете попробовать вот так

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

Ответ 23

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

Ответ 24

<!DOCTYPE html>
<html>
    <style>
        h2 {
           margin: 0 0 0 0;
           transform: rotate(270deg);
           transform-origin: top left;
           color: #852c98;
           position: absolute;
           top: 200px;
        }
    </style>
    <body>
        <h2>Its all in the curd</h2>
    </body>
</html>

Ответ 25

Это немного хакерское, но кросс-браузерное решение, которое не требует CSS

<div>
    <div>h</div>
    <div>e</div>
    <div>l</div>
    <div>l</div>
    <div>o</div>
<div>