在元素内向左移动跨度

Question

我有一个特殊的情况，我必须在标题的右边到左边浮动一个范围。问题是它必须是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）

谢谢大家...

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