我一直在尝试文字在垂直方向上，就像我们在ms-word表中所做的那样，但到目前为止我只能做THIS ...我不满意因为它是一个旋转的盒子...... Isn'有没有办法让实际的垂直方向文字？
我只在演示中将旋转设置为305度，这不会使文本垂直。 270deg但我只做了演示以显示旋转。
替代方法：http://www.thecssninja.com/css/real-text-rotation-with-css
p { writing-mode: tb-rl; }
添加课程
.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>
要以垂直方式显示文本（自上而下），我们可以简单地使用：
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.的信息
#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
我已经设法有一个有效的解决方案：
（我在middleItem类div中有一个标题）
.middleItem > .title{
width: 5px;
height: auto;
word-break:break-all;
font-size: 150%;
}
您可以使用自动换行：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;
}
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控制它。
如果您没有Adobe Illustrator，可以使用Inkscape制作SVG。
-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;
}
您可以使用以下CSS属性实现相同的功能：
writing-mode: vertical-rl;
text-orientation: upright;
你可以这样试试
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
<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>
这有点hacky但是跨浏览器解决方案，不需要css
<div>
<div>h</div>
<div>e</div>
<div>l</div>
<div>l</div>
<div>o</div>
<div>
我正在搜索实际的垂直文本而不是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 */
}
JSFiddle! Demo With Whitespace
更新2（28-JUN-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);
此外，如果未设置为display：block，则无法旋转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);
}
你也可以去here，看看另一种方式。作者这样做：
.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 */
}