Html 如何在不使用变换旋转的情况下从下到上书写垂直文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40205702/
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
How to write vertical text from bottom to top without using transform rotate?
提问by thadeuszlay
With writing-modeyou can only get the text to be read from top to bottom. According to https://developer.mozilla.org/en/docs/Web/CSS/writing-mode
使用writing-mode您只能从上到下阅读文本。根据https://developer.mozilla.org/en/docs/Web/CSS/writing-mode
the only option I have is using sideways. But this attribute is experimental.
我唯一的选择是使用sideways. 但这个属性是实验性的。
.verticalTxt_lr {
writing-mode: vertical-lr;
}
.verticalTxt_rl {
writing-mode: vertical-rl;
}
.rotate {
transform: rotateZ(270deg);
}
https://jsfiddle.net/thadeuszlay/5ueopnqu/2/
https://jsfiddle.net/thadeuszlay/5ueopnqu/2/
I wanted to write the label on the bars to be vertical but it should start from the bottom.
我想在条形上写垂直的标签，但它应该从底部开始。
http://jsfiddle.net/thadeuszlay/3HL4a/2402/
http://jsfiddle.net/thadeuszlay/3HL4a/2402/
Trying with rotate gives me a weird behaviour when animating the bar chart therefore I'm looking for another method to create vertical texts that can be read with your head tilted to the left.
在为条形图设置动画时，尝试使用旋转给我一个奇怪的行为，因此我正在寻找另一种方法来创建垂直文本，您的头部向左倾斜可以阅读这些文本。
回答by Dave
I combined writing-modeand rotation:
我结合writing-mode和rotation：
.rotated {
writing-mode: tb-rl;
transform: rotate(-180deg);
}<div class="rotated">Text from bottom with working width/height</div>This works for me without bad widthand heightsettings inside table cells.
这对我有用width，没有height表格单元格内的错误和设置。
important 2020 edit:
2020年重要编辑：
step 1) Look at https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode, ctrl/cmd-F for "Result". This table will reflect your browser (which may have improper implementation). Look at the table immediately below it. That table is what things shouldlook like.
步骤 1）查看https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode， ctrl/cmd-F 以获取“结果”。该表将反映您的浏览器（可能有不正确的实现）。看看它正下方的表格。那张桌子就是事情应该是什么样子。
Solution:
解决方案：
To make sure your solution is future proof:
为确保您的解决方案面向未来：
- Look at the appropriate column, which will be "Horizontal Script" unless you're coding e.g. in an Asian language.
- Find a row that suits your needs in terms of sizing the HTML element, AND is properly implemented (appears roughly the same) in the second table below it. For example
writing-mode:vertical-rl;would currently work on Chrome until others are properly implemented in the Blink engine (but if you based your answer off ofsideways-lrit would break once Blink properly implements this behavior, since the two rows are not the same.). - optional: set
transform-originto something, maybe usecalc(...), based on percentages and/or something else - perform
transform:rotate(180deg)or something. This should fix issues with layout that most people would have, causing them to look up this answer. If one has animation problems, that's a separate issue.
- 查看相应的列，除非您使用亚洲语言进行编码，否则该列将是“水平脚本”。
- 在调整 HTML 元素大小方面找到适合您需求的行，并且在其下方的第二个表中正确实现（看起来大致相同）。例如
writing-mode:vertical-rl;，目前可以在 Chrome 上工作，直到其他人在 Blink 引擎中正确实现（但如果你基于你的答案，sideways-lr一旦 Blink 正确实现此行为，它就会中断，因为两行不相同。）。 - 可选：根据百分比和/或其他内容设置
transform-origin为某些内容，可能使用calc(...) - 表演
transform:rotate(180deg)什么的。这应该可以解决大多数人会遇到的布局问题，从而导致他们查找此答案。如果一个人有动画问题，那是一个单独的问题。
(also tb-rl is deprecated now)
（现在也不推荐使用 tb-rl）
回答by Yogesh
.rotate {
transform: rotate(270deg);
}
This should be enough to rotate text vertically from bottom to top, apply it on div containing the text. If you are using writing-mode: vertical-rl/lr in conjunction to this, that may be switching it to other way around.
这应该足以从底部到顶部垂直旋转文本，将其应用于包含文本的 div。如果您使用 write-mode: vertical-rl/lr 与此结合，则可能会将其切换为其他方式。
