替代方法: 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! 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! Demo With Whitespace

更新2 (2015年6月28日)

自从 空白: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.

将文本旋转90度:

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

此外,如果不设置为“显示:块”,则无法旋转跨度标记。

对于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 docs.

我是新手,这对我有很大帮助。只需更改宽度、高度、顶部和左侧即可:

.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}

你也可以去 here 看看另一种方法。作者是这样做的:

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

轮换,就像你所做的,是前进的方向-但请注意,并不是所有的浏览器都支持这一点。如果你不想得到一个跨浏览器的解决方案,你将不得不为它生成图片。

可以使用CSS3转换属性

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

下面是一些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;

这同样有效:

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

我已经找到了一个可行的解决方案:

(我有一个中间品分类的头衔)

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

可以使用换行符:换行符来获取垂直文本 使用以下代码段

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

H E L O公司

注意:支持浏览器 -IE浏览器(8、9、10、11) -火狐浏览器(38,39,40,41,42,43,44) -Chrome浏览器(44、45、46、47、48) -Safari浏览器(8,9) -Opera浏览器(不支持) -Android浏览器(44)

尝试使用SVG文件,它似乎具有更好的浏览器兼容性,并且不会破坏您的响应性设计。

我尝试了CSS转换,但在转换源代码方面遇到了很多问题;最后得到了一个SVG文件。大概花了10分钟,我也可以用CSS来控制它。

如果没有Adobe Illustrator,可以使用Inkscape制作SVG。

你可以这样试试

-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>It’s 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>