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

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

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

p { writing-mode: tb-rl; }

-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;
}

Я искал настоящий вертикальный текст, а не повернутый текст в 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.

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

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

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

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

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

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

writing-mode: lr-tb;

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

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>

Обратите внимание, что мы можем добавить это, чтобы обеспечить совместимость браузера:

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

мы также можем прочитать больше о writing-modeсобственности здесь, в документации Mozilla.

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

.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;
}

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

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

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

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

}

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

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

Мне удалось найти рабочее решение с этим:

(У меня есть заголовок в div класса middleItem)

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

Вот пример кода 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>

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

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

Лучшим решением было бы использовать 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

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

<!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>It’s all in the curd</h2>
    </body>
</html>

Если вы хотите выравнивание вроде

S
T
A
R
T

Затем следуйте https://www.w3.org/International/articles/vertical-text/#upright-latin

Пример:

div.vertical-sentence{
  -ms-writing-mode: tb-rl; /* for IE */
  -webkit-writing-mode: vertical-rl; /* for Webkit */
  writing-mode: vertical-rl;
  
}
.rotate-characters-back-to-horizontal{ 
  -webkit-text-orientation: upright;  /* for Webkit */
  text-orientation: upright; 
}

<div class="vertical-sentence">
  <p><span class="rotate-characters-back-to-horizontal" lang="en">Whatever</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="fr">Latin</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="hi">वर्डप्रेस </span></p>
</div>

Обратите внимание, что в моем примере хинди имеет акцент, и он будет отображаться как один символ. Это единственная проблема, с которой я столкнулся с этим решением.

С сайта developer.mozilla.org

Свойство CSS ориентации текста устанавливает ориентацию текстовых символов в строке. Это влияет только на текст в вертикальном режиме (когда режим письма не горизонтальный-tb). Это полезно для управления отображением языков, использующих вертикальный сценарий, а также для создания вертикальных заголовков таблиц.

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

Вы также можете просмотреть весь синтаксис здесь

/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

Вы можете использовать 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;
}

<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>

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

ПРИВЕТ

ПРИМЕЧАНИЕ: Поддерживаемый браузер - браузер 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)

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

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

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

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

transform: rotate(90deg);

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

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

Это немного взломанное, но кроссбраузерное решение, которое не требует CSS.

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