垂直书写模式的最大高度 - 不起作用？

Question

下面是一个带有一些竖排文本的 table。它在 Chrome 和 Edge 中工作正常，但在 Firefox 中不工作。（我没有Safari，所以我不能说什么。）如何解决？

.vertical {
  writing-mode: vertical-rl;
}

th, td {
  max-height: 100px;
  max-width: 200px;
}

<table>
  <tr>
    <th>Lorem ipsum</th>
    <th>Lorem ipsum</th>
    <th class="vertical">Lorem ipsum dolor sit amet</th>
  </tr>
  <tr>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
  </tr>
  <tr>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
  </tr>
</table>

Chrome 和边缘：

火狐：

Answer 1

这是一个错误，您需要设置高度并设置 word-break 以在字数增加时保持高度：

.vertical {
    writing-mode: vertical-rl;
    height: 100px;
    word-break: break-all;
  }

Answer 2

  .vertical {
      writing-mode: vertical-rl;
      display : block;
   }

只需添加“显示：块”

垂直书写模式的最大高度 - 不起作用？

max-height for vertical writing mode - doesn't work?

html

css

firefox