Html 垂直文本方向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4264527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical Text Direction
提问by Moon
I have been trying text to go in a vertical direction like we can do in ms-word tables but so far I have only been able to do THIS... which I am not happy with because it's a box rotated... Isn't there a way to have actual vertical direction text?
我一直在尝试像我们在 ms-word 表中那样垂直方向上的文本，但到目前为止我只能做到这一点......我不满意，因为它是一个旋转的盒子......是不是有没有办法获得实际的垂直方向文本？
I only set the rotation to 305 degrees in the demo which doesn't make the text vertical. 270degwill but I only made the demo to show rotation.
我只在演示中将旋转设置为 305 度，这不会使文本垂直。270deg会，但我只制作了演示来显示旋转。
采纳答案by swan
Alternative approach: http://www.thecssninja.com/css/real-text-rotation-with-css
替代方法：http: //www.thecssninja.com/css/real-text-rotation-with-css
p { writing-mode: tb-rl; }
回答by Amit
-webkit-transform: rotate(90deg);
The other answers are correct but they led to some alignment problems. On trying out different things this CSS piece code worked perfectly for me.
其他答案是正确的，但它们导致了一些对齐问题。在尝试不同的东西时，这段 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;
}
回答by Mohd Abdul Mujib
I was searching for an actual vertical text and not the rotated text in HTML as shown below. So I could achieve it by using the following method.
我正在搜索实际的垂直文本，而不是 HTML 中的旋转文本，如下所示。所以我可以通过使用以下方法来实现它。
HTML:-
HTML:-
<p class="vericaltext">
Hi This is Vertical Text!
</p>
CSS:-
CSS:-
.vericaltext{
width:1px;
word-wrap: break-word;
font-family: monospace; /* this is just for good looks */
}
Update:-If you need the whitespacesto be displayed, then add the following property to your css.
更新：-如果您需要显示空格，请将以下属性添加到您的 css 中。
white-space: pre;
white-space: pre;
So, the css class shall be
所以，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
Update 2(28-JUN-2015)
更新 2(28-JUN-2015)
Since white-space: pre;doesnt seem to work (for this specific use) on Firefox(as of now), just change that line to
由于 white-space: pre;在 Firefox 上似乎不起作用（针对此特定用途）（截至目前），只需将该行更改为
white-space: pre-wrap;
white-space: pre-wrap;
So, the css class shall be
所以，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.*/
}
回答by Jbrown
To rotate text 90 degrees:
将文本旋转 90 度：
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
Also, it appears that the span tag can't be rotated without being set to display:block.
此外，如果不设置为 display:block，则似乎无法旋转 span 标签。
回答by Iggy
For vertical text with characters one below another in firefox use:
对于 Firefox 中字符一个下一个的垂直文本，请使用：
text-orientation: upright;
writing-mode: vertical-rl;
回答by Mladen Janjetovic
Try using:
尝试使用：
writing-mode: lr-tb;
回答by Abdallah Okasha
To display text in vertical (Bottom-top) we can simply use:
要垂直（自下而上）显示文本，我们可以简单地使用：
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>Note we can add this to ensure Browser Compatibility:
请注意，我们可以添加它以确保浏览器兼容性：
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
we can also read more about writing-modeproperty here on Mozilla docs.
我们还可以writing-mode在Mozilla 文档上阅读更多关于财产的信息。
回答by vishal singh
#myDiv{
text-align: center;
}
#mySpan{
writing-mode: vertical-lr;
transform: rotate(180deg);
}<div id="myDiv">
<span id="mySpan"> Here We gooooo !!! </span>
</div>
回答by NICK
I'm new at this, it helped me a lot. Just change width, height, top and left to make it fit:
我是新手，这对我帮助很大。只需更改宽度、高度、顶部和左侧以使其适合：
.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}
You can also go hereand see another way to do it. The author does it like this:
你也可以去这里看看另一种方法。作者是这样做的：
.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}
回答by Sadee
Can use CSS3 Transform property
可以使用 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 */
}
