Question

以下简单方案说明了未包装文本时所需的结果：

＆＃13;

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

＆＃13;

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

＆＃13;

如果margin-right元素上的<h1>略有增加（强制文字换行），上方文字将不再按预期定位。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

您可以尝试display:flex上的.container h1与vertical-align: super上的.container .above结合使用。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: