求助：React Table旋转列表头后如何实现文字断行换行

嘿，我刚好碰到过类似的React Table表头旋转后换行失效的问题，给你分享个可行的解决方案！

问题出在哪？ #

你用writing-mode: vertical-rl; transform: rotate(180deg);实现表头旋转没问题，但这俩属性组合后，元素的文本流和布局计算逻辑变了——浏览器会把旋转后的元素当成一个“变形后的块”，普通的word-wrap或者white-space根本没法按预期触发换行，因为坐标系都变了。

怎么搞定？ #

我们需要调整CSS规则，明确限制表头高度，同时强制文本在旋转后的容器里换行，还要确保样式优先级能覆盖React Table的默认设置：

1. 给旋转表头的容器加这些CSS：

.rotated-header {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  /* 设定表头最大高度，超过就自动换行 */
  max-height: 140px;
  /* 强制文本换行，覆盖默认的nowrap */
  white-space: normal;
  /* 调整行高让换行后的文字更易读 */
  line-height: 1.3;
  /* 用flex布局确保文本在单元格内居中，同时容器能自适应内容 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 加个最小宽度，避免表头缩得太窄 */
  min-width: 45px;
}

2. 在React Table列配置里指定这个类：
   把需要旋转的表头用自定义div包裹，加上刚才的类名：

const columns = [
  {
    Header: () => <div className="rotated-header">Name</div>,
    accessor: 'name',
    // 其他列配置...
  },
  // 其他列...
];

3. 如果还是没效果，就覆盖React Table的默认样式：
   React Table的.rt-th单元格默认可能有white-space: nowrap或者固定高度，得把这些覆盖掉：

.rt-th .rotated-header {
  white-space: normal !important;
  height: auto !important;
}

为啥这么管用？ #

• max-height直接给表头设了上限，文本超过这个高度就会触发换行；
• white-space: normal强制浏览器在容器边界处换行，干掉了React Table默认的不换行设置；
• flex布局让旋转后的文本能在单元格里居中，同时容器会根据文本高度自动调整，不会出现内容被截断的情况。

这样改完，你的“Name”表头文本就能乖乖在限制高度内自动断行啦！

内容的提问来源于stack exchange，提问作者morasta