Я намагався текст переходити у вертикальному напрямку, як ми можемо це робити у таблицях ms-word, але поки що мені вдалося зробити ЦЕ ... чим я не задоволений, тому що це поле обертається ... Хіба що ' t чи є спосіб мати фактичний текст вертикального напрямку?

Я встановлюю лише обертання на 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! Демо з Whitespace

Оновлення 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 неможливо повернути, не встановивши для відображення: 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 > .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>