jsfiddle here.
我有一个使用background-color: yellow 和padding: 1px 10px 突出显示的span 元素。
但是，在较小的设备上，这行文本变为两行、三行等。这会导致第一行和第二行“丢失”右侧的填充，例如单词“the”和“to”，第二行和第三行“丢失”left侧的填充，例如下图中的“highlight”和“better”：
我怎样才能确保这些字词（在上图中，“the”、“highlight”、“to”、“better”）和所有其他字词保持这个 10px 的填充左右两边？
有人在回答类似问题时建议使用display: block，但这使得跨度不再是跨度，而是一个矩形，这不是我需要的样子。它还使突出显示跨越页面的整个宽度。
【问题讨论】：
标签： html css padding highlight
当跨度被破坏时，您可以尝试使用box-shadow 伪造背景。试试这样的方法，看看它是否适合你：
span {
background-color: yellow;
padding: 1px 0;
box-shadow: 10px 0 0 0 yellow, -10px 0 0 0 yellow;
}<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a nisi ipsum. Mauris convallis dapibus diam ac sollicitudin. Vivamus varius nulla magna, ac rutrum nulla accumsan quis. Duis placerat, elit non posuere elementum, tellus massa pellentesque nunc, eu maximus ligula metus non dui. Sed accumsan quam nec sodales sagittis.</span>【讨论】：
要包含尽可能多的浏览器，您可以在 position:relative 上进行中继，并使用 2 个嵌入的内联标签来模仿所需的结果。
请注意，应考虑一些边距或填充，以通过位置保持已翻译元素的入站。
展示想法的示例
p {/* make the text wrap*/
width:15em;
margin:2em;
}
span {
background:yellow;
/* increase line height for better reading : optionnal*/
line-height:1.35em;
padding: 0.25em 0;
}
span span {
/* move child 1em to left to fake padding */
position:relative;
left:1em;/* value of your left alike padding*/
}
/* eventually on the last line ? */
span span:after {
content:'';
padding:0.25em;
}<p>
<span>
<span>This sentence <del> has some padding</del> to make the highlight appear thicker. These are more words to better explain.
</span>
</span>
</p>https://jsfiddle.net/ynh35sL5/3/
这不是最好的，用于样式的额外 HTML ...跨度是中性的 :(
【讨论】：
只需将其包装在容器 div 中，然后在该元素上放置水平填充，因为这正是您想要的：
<div class="span-container><span>my text</span></div>
.span-container { padding: 0 10px; }
.span-container span { background-color: yellow; padding: 1px 0; }
这里有一个小提琴证明这完全可以实现您想要的，而无需在每个浏览器中都可以使用的变通方法：https://jsfiddle.net/xg1bkgmn/
span 是一个内联元素，在仅突出显示文本和加宽行的情况下使用它是有意义的。然而，为了保持整个东西被填充，它需要一个块元素容器，这是标准做法。
解决方案如此简单，为什么还要使用更复杂的 CSS？
【讨论】：
使用 box-decoration-break CSS。
span {
background-color:yellow;
padding:1px 10px;
box-decoration-break: clone;
-webkit-box-decoration-break:clone;
}
这会将样式应用于跨度中的每个框片段。
【讨论】：
box-decoration-break的支持不是很好