在元素内将 span 向左移动答案

【问题标题】：Move span to the left within element在元素内将 span 向左移动
【发布时间】：2020-01-23 15:22:27
【问题描述】：

我有一个特殊情况，我必须从标题的右侧到左侧浮动一个跨度。问题是它必须是 CSS2，因为它是用于 epub2-book 的。

就我目前所拥有的（见底部）来说，当它是一行时看起来不错：

但空间较小，所以当它是两行时，它最终看起来像这样：

我猜这是因为跨度实际上仍然在<h1> 的末尾，所以它移动到了底线。我在有和没有vertical-align: top; 或top: 0; 的情况下都试过了，但是没有用。

span {
  float: left;
  display: inline-block;
  margin-right: 1em;
}

<h1>text hahaha I am such a cool text!
  <span>|left Text|</span>
</h1>

有什么方法可以将部分移动到元素的开头？或者让它漂浮到顶部？（是的，我知道没有float: top;）

【问题讨论】：

标签： html css epub

【解决方案1】：

如果您知道文本的宽度，您可以使用position:absolute 和text-indent 破解它

span {
  position:absolute;
  top:0;
  left:0;
  text-indent:0px;
}

h1 {
  position:relative;
  text-indent:140px;
}

<h1>text hahaha I am such a cool text!
  <span>|left Text|</span>
</h1>

【讨论】：

【解决方案2】：

你必须有跨度还是可以使用:before

h1:before {
  content: "|left Text| "
}

<h1>text hahaha I am such a cool text!
</h1>

【讨论】：