5

首先，我想承认存在表格单元格中的垂直文本问题，但由于它只是试图旋转整个单元格而不是垂直书写风格，它与我的问题无关（例如那个问题确实不包括text-orientation: upright;应用程序）

我目前正在处理我想在表格单元格中使用 CSS 垂直文本的东西，使用writing-mode: vertical-rlor 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)它时不会重新计算表格单元格的尺寸，在某些情况下会导致文本溢出到单元格之外。

4

1 回答 1

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>

于 2020-01-22T07:27:14.157 回答