如何修剪 flex: 1 内的垂直文本？

Question

我正在努力在

flex: 1

中居中并修剪垂直旋转的文本

.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;
}

<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> <!-- isn't centered :/ -->
    </div>
  </div>
  <div class="wrapper-el">
    <div class="tab">
      <div class="rotate">ReallyLongWordNeedsToBeEllipsed</div> <!-- how can this text be trimmed? -->
    </div>
  </div>
</div>

这是与我的方法类似的示例，但在我的机器上它看起来像这样：

Answer 1

你已经差不多好了，只是缺少一些属性。查看评论：

.wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.wrapper-el {
  display: flex;
  flex: 1;
  min-height: 0; /* added */
  border: 2px solid #ddd;
}

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

.rotate {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 60px;
  max-height: 100%; /* added */
  letter-spacing: 2px;
}

<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> <!-- isn't centered :/ -->
    </div>
  </div>
  <div class="wrapper-el">
    <div class="tab">
      <div class="rotate">ReallyLongWordNeedsToBeEllipsed</div> <!-- how can this text be trimmed? -->
    </div>
  </div>
</div>