行内换行文本旁旋转90度文本的垂直居中兼容问题

• 需求：将文本旋转90度后，在换行的行内文本旁保持垂直居中；需保持文本行内状态，实现左对齐且换行时整体居中。
• 异常表现：该效果在Chrome中单行、换行场景均正常，但Firefox中仅单行时显示正常，当文本换行后，旋转的文本无法维持垂直居中，推测是Firefox未正确识别换行后文本的整体高度。
• 测试方法：缩小输出区域宽度使主文本换行，即可观察Firefox中的异常情况。

相关代码 #

CSS 代码 #

.title-container {
    font-size: 70px;
    position: relative;
}
.title-container .title {
    position: relative;
}
.title-container .pre-title {
    position: absolute;
    bottom: 50%;
    left: -55px;
    transform: rotate(-90deg);
    transform-origin: center bottom;
    height: 22px;
    border-bottom: 1px solid #000;
    font-size: 16px;
    text-transform: uppercase;
}

HTML 代码 #

<h2 class="title-container m-b-0">
  <span class="title">
    <span class="pre-title h6 m-b-0">Your Agent</span>
      Charles Smith
    </span>
</h2>

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