垂直的文本方向
我一直在尝试文字在垂直方向走，就像我们可以在MS字表中一样，但到目前为止，我只能做到这一点 …我不满意，因为它是一个旋转的盒子… Isn'有没有办法有实际的垂直方向的文字？
我只在演示中将旋转设置为305度，这不会使文本垂直。 270deg会但我只做了演示显示旋转。
替代方法： http : //www.thecssninja.com/css/real-text-rotation-with-css
p { writing-mode: tb-rl; }
-webkit-transform: rotate(90deg);
其他答案是正确的，但他们导致一些alignment问题。 在尝试不同的事情这个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！ 与空白的演示
更新2 （2015年6月28日）
由于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演示FF兼容。
旋转文字90度：
-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
此外，似乎span标签不能被设置为显示：块。
尝试使用：
writing-mode: lr-tb;
对于firefox中的字符一个在另一个下面的垂直文本使用：
text-orientation: upright; writing-mode: vertical-rl;
轮换，就像你做的那样，是要走的路 – 但请注意，并非所有的浏览器都支持这一点。 如果你不想得到一个跨浏览器的解决scheme，你将不得不为此生成图片。
可以使用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 */ }
我是新的在这，它帮助了我..只是改变宽度，高度，顶部和左侧，以使其适合..
.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; }
添加类
.rotate { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); }
我每天都用这个，而且没有任何问题。
这也适用于：
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
下面是我用来将三行垂直文本放入表格列标题的一些SVG代码的示例。 其他angular度是可能的一点调整。 我相信现在大多数浏览器都支持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>
你可以使用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; }
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文件，它似乎有更好的浏览器兼容性，并不会打破你的响应式devise。
我尝试了CSS转换，并且在转换起源方面遇到了很多麻烦。 并最终与一个SVG文件。 花了10分钟，我也可以用CSS控制一下。
如果您没有Adobe Illustrator，则可以使用Inkscape制作SVG。
我已经设法有这个工作的解决scheme：
（我有一个middleItem类div中的标题）
.middleItem > .title{ width: 5px; height: auto; word-break:break-all; font-size: 150%; }
<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的跨浏览器的解决scheme
<div> <div>h</div> <div>e</div> <div>l</div> <div>l</div> <div>o</div> <div>
