Я пытаюсь, чтобы текст шел в вертикальном направлении, как мы можем делать в таблицах 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 */
}
Обновление:. Если вам нужно отобразить пробелы, добавьте следующее свойство в ваш 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 */
}
Обновление 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.*/
}
Чтобы повернуть текст на 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;
Я новичок в этом, мне это очень помогло. Просто измените ширину, высоту, верх и левый угол, чтобы он подходил:
.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>ротация, как и вы, - это путь, но обратите внимание, что не все браузеры поддерживают это. если вы не получите кросс-браузерное решение, вам придется создавать для этого фотографии.
Может использовать свойство 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);
}
Я использую это почти каждый день и не имел никаких проблем с ним.
Вот пример некоторого 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>
#myDiv{
text-align: center;
}
#mySpan{
writing-mode: vertical-lr;
transform: rotate(180deg);
}<div id="myDiv">
<span id="mySpan"> Here We gooooo !!! </span>
</div>Это также работает:
transform: rotate(90deg);
Лучшим решением было бы использовать 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
У меня есть рабочее решение с этим:
(У меня есть заголовок внутри класса div по-русски)
.middleItem > .title{
width: 5px;
height: auto;
word-break:break-all;
font-size: 150%;
}
Вы можете достичь того же с помощью следующих свойств CSS:
writing-mode: vertical-rl;
text-orientation: upright;
Вы можете использовать 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 и имел большие проблемы с источником transform; и в итоге появился файл SVG. Это заняло 10 минут, и я тоже мог немного контролировать его с помощью CSS.
Вы можете использовать Inkscape для создания SVG, если у вас нет Adobe Illustrator.
Вы можете попробовать вот так
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
.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>Its all in the curd</h2>
</body>
</html>
Это немного хакерское, но кросс-браузерное решение, которое не требует CSS
<div>
<div>h</div>
<div>e</div>
<div>l</div>
<div>l</div>
<div>o</div>
<div>