Я пытаюсь текст в вертикальном направлении, как мы можем сделать в MS-таблицы слов, но до сих пор я только был в состоянии сделать [это][1]... которых я не доволен, потому что он'с ящиком поворачивается... разве'т ли способ, чтобы иметь фактическое вертикальное направление текста?
Я поставил только вращение до 305 градусов в демо-версии, которая не'т сделать текст вертикальным. `Изображение на 270 градусов будет, но я только сделал демо, чтобы показать поворот.
Альтернативный подход: 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>
Усс:-
.vericaltext{
width:1px;
word-wrap: break-word;
font-family: monospace; /* this is just for good looks */
}
[JSFiddle! Демо.][2]
Обновления:- Если вам нужно пробелы для отображения, а затем добавьте следующее свойство в CSS.
бело-пространстве: предварительные;
Так, класс 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! Демо С Пробелами][3]
Обновление 2 (28-июн-2015)
С бело-пространстве: предварительно;` не работают (для этого конкретного использования) в Firefox(как сейчас), просто измените эту строку, чтобы
бело-пространстве: предварительно обертывание;
Так, класс 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 демо-совместимый ФФ.][4]
Чтобы повернуть текст на 90 градусов:
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
Также выяснилось, что в теге span может'т быть повернут, не будучи настроена для отображения:блок.
Для вертикального текста символы один под другим В использовать Firefox:
text-orientation: upright;
writing-mode: vertical-rl;
Попробуйте использовать:
writing-mode: lr-tb;
Я'в это м новый, он мне очень помог. Просто измените ширину, высоту, сверху и слева, чтобы оно уместилось:
.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;
}
Для отображения текста по вертикали (снизу-сверху) мы можем просто использовать:
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);
мы также можем читайте здесь больше о запись-режим
собственность на Мозилла документы.
Вот пример некоторого кода в 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 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>
Может используют 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);
}
Я использую это почти каждый день и не имели никаких проблем с ним.
в
#myDiv{
text-align: center;
}
#mySpan{
writing-mode: vertical-lr;
transform: rotate(180deg);
}
<div id="myDiv">
<span id="mySpan"> Here We gooooo !!! </span>
</div>
в
Лучшим решением будет использование написания-режим письменность-режим: вертикальный-РЛ;` https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
Он определяет, должны ли строки текста выкладываются горизонтально или вертикально и направление, в котором блокирует прогресс.
Он имеет хорошую поддержку браузера, но не будет работать на IE8 (если вы заботитесь о IE) http://caniuse.com/#feat=css-writing-mode
Вы можете достичь того же С ниже свойства CSS:
writing-mode: vertical-rl;
text-orientation: upright;
<!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>
Вы можете использовать перенос слов:брейк-слова, чтобы сделать вертикальный текст используем следующие snippete
HTML-код:
<div class='verticalText mydiv'>Here is your text</div>
Усс:
.verticalText {
word-wrap: break-word;
font-size: 18px;
}
.mydiv {
height: 300px;
width: 10px;
}
<HTML и ГТ;
<головы>
<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>
</HTML и ГТ;