css - 转换后的 flexbox 标头的断词

Question

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

我需要在我的反应表中旋转一些列标题。这是通过以下方式完成的：

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

但是，有些文本过长，我想在旋转后限制高度，将单词分解为新行。一直在尝试各种显示、最小/最大高度宽度、自动换行等，但还是不太明白。

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

Answer 1

你需要添加white-space: normal;到你的CSS

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