html - 将元素置于包装文字的右上 Angular

下面的简单场景演示了文本未换行时的所需结果：

.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>稍微增加（强制文本换行），则上面的文本将不再位于所需的位置。

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

它的垂直位置是正确的，但水平方向是相对于最后一个单词的右边缘对齐的。是否有办法将上面的<span>与最长行上最后一个单词的右边缘水平对齐？这样，上面的文本将始终保持在文本块的右上角（换行或单行）。

最佳答案

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

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