Joe*_*e50 5 html css vertical-text
首先，我想承认表格单元格中的垂直文本问题存在，但是由于这只是尝试旋转整个单元格而不是垂直书写样式，因此它与我的问题无关（例如该问题确实不包括text-orientation: upright;应用程序）
我目前正在研究一些我想在表格单元格中使用 CSS 垂直文本的地方，使用writing-mode: vertical-rl或vertical-lr。但是，当我尝试将其应用于表格时，它没有做任何事情。请参阅以下最小示例：
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;.
我可以做些什么来使垂直文本在所有主要浏览器中都能正常工作？顺便说一下，Mozilla 在他们的 MDN 页面底部的桌子上transform: rotate(-90deg)这样做，它使用，这似乎不太可能，但它确实在页面顶部发表了他们的声明（“这对（... ) 制作垂直表格标题。”) 有点好奇。
我想使用的原因writing-mode是，使用transform: rotate(90deg)它时不会重新计算表格单元格的尺寸，在某些情况下会导致文本溢出单元格。
小智 6
只需使用另一个元素（如 div 元素）将文本包裹到 td 元素中。
.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>