转换后的 flexbox 的中断词 header

Question

示例：https://codesandbox.io/s/18p67pnp47

我需要轮换 react-table 中的某些列 headers。这是通过以下方式完成的：

writing-mode: vertical-rl;
transform: rotate(180deg);

不过，有些文字过长，我想限制高度post-rotation，将文字拆分成新的一行。一直在尝试各种显示，min/max 高度宽度，word-wraps 等，但不太明白。

上面链接的示例显示了问题（名称应换行）并包含所有相关标记。有什么想法吗？

Answer 1

您需要将 white-space: normal; 添加到您的 css

.rt-resizable-header-content {
    white-space: normal;
 }