Ant Design侧边标签页自动换行失效，如何实现文本垂直显示？

我之前开发Ant Design项目时也遇到过一模一样的需求！想要把垂直标签里的文字改成T A B 1这种逐行竖排的效果，你现在的CSS已经搭了基础，但还差几个关键属性来强制文字垂直排列，下面给你两种可行的方案：

方案一：Flex布局强制字符垂直分布 #

这种方法会让每个字符单独占一行，完全符合你描述的T A B 1形式：

.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab {
  height: 90px;
  width: 30px;
  margin: 0;
  padding: 0;
  /* 核心：用flex垂直排列内容 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  text-align: center;
}

为什么你的原有代码没生效？ #

你用的word-break: break-all只有在文本宽度超出容器时才会自动换行，但像TAB1这种短文本，浏览器不会主动把每个字符拆分开，flex布局则可以强制让内容按垂直方向分布，完美解决这个问题。

方案二：使用writing-mode原生竖排 #

如果你想要的是类似手写竖排的效果（文字整体垂直，从左到右阅读），可以用CSS原生的writing-mode属性，代码更简洁：

.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab {
  height: 90px;
  width: 30px;
  margin: 0;
  padding: 0;
  /* 核心：设置垂直排版方向 */
  writing-mode: vertical-lr;
  display: flex;
  align-items: center;
  justify-content: center;
}

这种方式的竖排是连续的，比如TAB1会变成从上到下的T、A、B、1，和flex布局的效果一致，但原生属性对多语言支持更好。

你可以根据自己的视觉需求选其中一种方案替换现有代码，测试一下效果～

内容的提问来源于stack exchange，提问作者Mark Gerryl Mirandilla