table 单元格中的垂直文本在 Chrome 中使用 css3 书写模式

Question

首先，我想承认问题 Vertical text in table cell 存在，但由于它只是试图旋转整个单元格而不是垂直书写风格，所以它与我的问题无关（例如，该问题不涵盖 text-orientation: upright; 个应用程序）

我目前正在做一些事情，我想在 table 单元格中使用 CSS 垂直文本，使用 writing-mode: vertical-rl 或 vertical-lr。但是，当我尝试将其应用于 table 时，它什么也没做。请参阅以下最小示例：

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 中看到的那样，文本在 table 中根本没有旋转（而 div 清楚地表明该样式在其他地方也适用Chrome)。使用 Chrome 检查器，样式似乎确实与单元格正确匹配，但在 'Computed' 样式选项卡下，它显示计算样式为 writing-mode: horizontal-tb;.

我可以做些什么来让竖排文本在所有主流浏览器中都能正常工作吗？顺便说一下，Mozilla 在他们的 MDN 页面底部的 table 上使用 transform: rotate(-90deg)，这似乎不太可能，但它确实在页面顶部做了他们的声明（ "It is useful for (...) making vertical table headers.")有点好奇

我想使用 writing-mode 的原因是，当使用 transform: rotate(90deg) 时，它不会重新计算 table 单元格的尺寸，导致文本溢出到单元格外在某些情况下。

Answer 1

只需将文本用另一个元素（例如 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>

table 单元格中的垂直文本在 Chrome 中使用 css3 书写模式

vertical text in table cell using css3 writing-mode in Chrome

html

css

vertical-text