位于包装文本右上角的位置元素

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>

如果<h1>元素上的margin-right略有增加（强迫文本包装）上面的文本不再根据需要放置。

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

它的垂直位置是正确的，但是水平地相对于 last Word Word 的右边缘对齐。有没有一种方法可以水平对齐 <span>相对于最长行上的最后一个单词的右边缘 的右边缘？这样，上面的文本将始终保留在文本块的右上角（包装或单行）。

Answer 1

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

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