有没有办法只设置块元素的背景，直到只有文本结尾

Question

有没有办法只设置块元素的背景，直到只保留css display: block 属性的文本末尾。

当您为这些块元素设置背景时，h1和p是块元素 周围的元素看起来像一个盒子。

见下文：

如果我将css display: inline 设置为这些块元素，则背景仅应用于元素周围的文本。

见下文：

我们如何应用仅包含上述文本的背景，但将css属性 display: block 保留在元素中。 css 或 javascript 中有任何黑客可以产生相同的输出吗？

Answer 1

在块元素中添加一个内联元素，如下所示：

<p><span>Text here...</span></p>

并设置内联元素的样式。

span {background: red;}

Answer 2

＆＃13;

＆＃13;

strong {
background-color:#ffa500;

}
span{
background-color:#03a9f4;

}

＆＃13;

<h1><strong>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</strong></h1>

<p><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</span></p>

＆＃13;

＆＃13;

＆＃13;

Answer 3

可以使用新的HTML5标记来标记/突出显示任何句子，而不管元素类型（块或内联）。但缺点是我们无法控制高光颜色，它总是黄色

    <div>Lorem <mark>Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</mark> the industry's standard dummy </div>

预览JS小提琴：https://jsfiddle.net/itsselvam/gLbgukd9/#&togetherjs=xHVthKGqIE

我希望这会有所帮助。干杯