文本下面的绝对文本位置避免重叠

Question

以黄色背景着色的跨度覆盖下方的文字。如何避免重叠并使其看起来像是在单词＆＃34;可靠＆＃34;之后插入跨度。在预标签。

问题显示在这个jsfiddle here上。 预期结果看起来像this，但不要将span标记嵌入到标记中。

如果标记中的格式化文本无法分成多个标记，如何解决问题？

Answer 1

将<span></span>放在<pre>标记内。

<pre>
    Forget the foosball table and a decent coffee machine; the thing staff most want from their employers is a fast and reliable information technology system, according to an international survey.

<span>NO-OVERLAY</span>

    The research was carried out by London-listed multinational Regus which provides serviced offices and meeting rooms for business people.
</pre>

另外，将CSS更改为：

pre {
white-space: pre-wrap;
}
span {
    background: yellow;
    margin-left: 90px;
}

请参阅此处的小提琴：http://jsfiddle.net/zuhgs54h/