转换后的 flexbox 的中断词 header

Break word for transformed flexbox header

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

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

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

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

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

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

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