如何在flex:1容器内实现垂直旋转文本的居中与裁剪？

我目前遇到两个核心问题：

• 在flex:1的容器中，垂直旋转的文本无法正常居中显示
• 过长的垂直旋转文本无法自动裁剪并显示省略号

以下是我的实现代码：

CSS代码 #

.wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}

.wrapper-el {
  display: flex;
  flex: 1;
  border: 2px solid #ddd;
}

.tab {
  height: auto;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}

.rotate {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 60px;
  max-width: fit-content;
  letter-spacing: 2px;
}

HTML代码 #

<div class="wrapper">
  <div class="wrapper-el">
    <div class="tab">
      <div class="rotate">title</div>
    </div>
  </div>
  <div class="wrapper-el">
    <div class="tab">
      <div class="rotate">title</div> <!-- 未居中 :/ -->
    </div>
  </div>
  <div class="wrapper-el">
    <div class="tab">
      <div class="rotate">ReallyLongWordNeedsToBeEllipsed</div> <!-- 如何裁剪此文本？ -->
    </div>
  </div>
</div>

当前显示效果 #

解决方案 #

1. 文本居中修复 #

问题源于writing-mode和transform:rotate(180deg)组合后，元素对齐基准偏移。通过调整.tab和.rotate的布局规则即可修复：

2. 长文本裁剪修复 #

垂直文本裁剪需要结合writing-mode与正确的尺寸限制，给旋转元素设置容器占比后，配合溢出规则即可实现自动裁剪。

完整修改后的CSS代码 #

.wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}

.wrapper-el {
  display: flex;
  flex: 1;
  border: 2px solid #ddd;
}

.tab {
  height: auto;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
  position: relative;
}

.rotate {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  height: 100%;
  letter-spacing: 2px;
}

修改后，文本会在flex:1容器内完美居中，长文本也会自动裁剪并显示省略号。

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