html - 将元素定位在换行文本的右上角

Question

以下简单场景说明了文本未换行时的预期结果:

.container {
  height: 300px;
  width: 600px;
}
.container h1 {
  margin-right: 300px;
  position: relative;
}
.container .above {
  font-size: 0.5em;
  position: absolute;
  top: 0;
}

<div class="container">
  <h1>
    The Wrapped Text
    <span class="above">Above</span>
  </h1>
</div>

如果margin-right在 <h1> 上元素略微增加(强制文本换行)Above 文本不再按需要定位。

.container {
  height: 300px;
  width: 600px;
}
.container h1 {
  margin-right: 350px;
  position: relative;
}
.container .above {
  font-size: 0.5em;
  position: absolute;
  top: 0;
}

<div class="container">
  <h1>
    The Wrapped Text
    <span class="above">Above</span>
  </h1>
</div>

它的垂直位置是正确的，但水平方向是相对于最后一个词 的右边缘对齐的。有没有办法水平对齐 Above <span>相对于最长行上最后一个单词的右边缘？这样，Above 文本将始终保留在文本 block 的右上角(换行或单行)。

Answer 1

您可以尝试在 .container h1 上组合 display:flex 和在 .container .above< 上组合 vertical-align: super/.

.container {
  height: 300px;
  width: 600px;
}
.container h1 {
  display: flex;
  margin-right: 350px;
  position: relative;
}
.container .above {
  font-size: 0.5em;
  vertical-align: super;
}

<div class="container">
  <h1>
    The Wrapped Text
    <span class="above">Above</span>
  </h1>
</div>