在Chrome中使用css3写入模式在表格单元格中显示垂直文本 [英] vertical text in table cell using css3 writing-mode in Chrome
问题描述
首先，我想承认问题表单元格中的垂直文本存在，但是因为那样只是尝试旋转整个单元格而不是采用垂直书写样式，这与我的问题无关(例如，该问题未涵盖text-orientation: upright;应用程序)
First of all, I'd like to acknowledge that the question Vertical text in table cell exists, but since that simply tries to rotate the whole cell instead of having vertical writing style, it is not relevant to my question (for example that question does not cover text-orientation: upright; applications)
我目前正在使用writing-mode: vertical-rl或vertical-lr在表格单元格中使用CSS垂直文本的东西上工作.但是，当我尝试将此应用到表时，它什么也没做.请参见以下最小示例:
I am currently working on something where I'd like to use CSS vertical text, within a table cell, using writing-mode: vertical-rl or vertical-lr. However, when I try to apply this to the table, it does not do anything. See the following minimal example:
th, td, div {
writing-mode: vertical-rl;
}
<table>
<tr><th>foo</th><th>bar</th></tr>
<tr><td>baz</td><td>quux</td></tr>
</table>
<div>Lorem ipsum dolor sit amet</div>
正如您在Chrome浏览器中看到的那样，表格中的文本完全不会旋转(而div则表明样式确实适用于Chrome).使用Chrome检查器，该样式似乎确实与单元格正确匹配，但是在计算"样式选项卡下，它表明计算出的样式为writing-mode: horizontal-tb;.
As you can see when viewing this in Chrome, the text does not get rotated at all in the table (while the div makes clear the style does work elsewhere for Chrome). Using the Chrome inspector, the style does seem to get matched to the cells correctly, but under the 'Computed' styles tab, it shows that the computed style is writing-mode: horizontal-tb;.
我可以做些什么使所有主要浏览器中的垂直文本正常工作吗?顺便说一下，Mozilla在使用[c7>的MDN页面底部的表上执行此操作的方式似乎不太可能，但随后确实在页面顶部进行了声明(对于( ...)制作垂直表标题.)有点好奇.
Is there anything I can do to make vertical text work in all major browsers? Going by the way Mozilla does it on their table at the bottom of their MDN pages, which uses transform: rotate(-90deg), it does not seem likely, but then it does make their statement at the top of the page ("It is useful for (...) making vertical table headers.") a bit curious.
我想使用writing-mode的原因是，当使用transform: rotate(90deg)时，它不会重新计算表格单元格的尺寸，在某些情况下会导致文本在单元格外溢出.
The reason I'd like to use writing-mode is because, when using transform: rotate(90deg) it does not re-calculate the table cell's dimensions, causing text to overflow outside the cell in some cases.
推荐答案
只需将文本与div元素之类的另一个元素包装到td元素中即可.
Just wrap the text into the td-element with another element like the div-element.
.vertical {
writing-mode: vertical-rl;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>writing-mode: vertical-rl</title>
</head>
<body>
<h2>writing-mode: vertical-rl</h2>
<table>
<tr><th>foo</th><th>bar</th></tr>
<tr><td>baz</td><td><div class='vertical'>quux</div></td></tr>
</table>
</body>
</html>
这篇关于在Chrome中使用css3写入模式在表格单元格中显示垂直文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
