如何让旋转文本基于单元格高度而非宽度实现自动换行？

我完全懂你现在的困扰——想要做出和Excel一样的垂直旋转表头，结果文本换行总是跟着水平宽度走，没法按照你设定的垂直高度（120px）来自动折行对吧？其实核心问题就是默认的文本布局是水平维度的，咱们得调整布局方向，让换行逻辑跟着垂直空间走。

下面给你一个可行的实现方案，用CSS的writing-mode结合嵌套容器来搞定：

HTML结构 #

先给表头单元格嵌套一个内层容器，用来单独控制文本的布局：

<table border="1" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <!-- 垂直旋转表头列 -->
      <th class="vertical-header">
        <div class="header-text">这是一段需要根据垂直高度换行的表头文本示例</div>
      </th>
      <th class="vertical-header">
        <div class="header-text">另一个更长的表头内容，测试自动换行效果</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据单元格1</td>
      <td>数据单元格2</td>
    </tr>
  </tbody>
</table>

CSS样式 #

关键是通过writing-mode改变文本的流动方向，让换行逻辑基于垂直高度：

/* 表头单元格的基础样式 */
.vertical-header {
  width: 40px; /* 你需要的水平宽度 */
  height: 120px; /* 触发换行的垂直高度 */
  padding: 0;
  border: 1px solid #ccc;
}

/* 控制文本布局的内层容器 */
.header-text {
  /* 设置文本垂直流动，此时换行将基于容器高度 */
  writing-mode: vertical-rl;
  /* 反转文本方向，让内容从下往上显示，贴近Excel垂直表头的视觉习惯 */
  transform: rotate(180deg);
  /* 继承父元素的高度，确保换行触发条件是120px */
  height: 100%;
  width: 100%;
  /* 让文本在容器内居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 强制文本在需要时换行，避免溢出 */
  word-break: break-word;
  /* 可选：调整行高让换行更美观 */
  line-height: 1.2;
}

原理说明 #

1. writing-mode: vertical-rl把文本的流动方向改成垂直从右到左，这样浏览器的换行逻辑就会基于容器的垂直高度，而不是默认的水平宽度。
2. transform: rotate(180deg)是为了让文本的阅读方向和Excel里垂直旋转后的表头一致（从下往上读），如果不需要这个方向，可以去掉这一行。
3. word-break: break-word确保长单词或者连续文本也能在高度限制内自动换行，不会溢出容器。

如果需要更精细的控制，比如调整换行的时机，还可以尝试用overflow-wrap: break-word替代word-break，或者调整line-height来优化行间距。

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