Question

jsfiddle here。

我有一个使用background-color: yellow和padding: 1px 10px突出显示的span元素。

但是，在较小的设备上，这行文本变为两行，三行等。这会导致第一行和第二行“丢失”右侧侧的填充，例如单词“the”和“to”，以及第二行和第三行“丢失”左侧侧的填充，例如下图中的“突出显示”和“更好”字样： / p>

如何确保这些字（在上图中，“the”，“highlight”，“to”，“better”）以及所有其他字词保持此10px填充左侧和右侧？

有人回答类似问题建议使用display: block，但这会使跨度不再是 span ，只是一个矩形，这不是我需要它看的方式。它还使突出显示跨越页面的整个宽度。

Answer 1

使用box-decoration-break CSS。

span {
  background-color:yellow;
  padding:1px 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break:clone;
}

这会将样式应用于跨度中的每个框片段。

Answer 2

使用box-shadow可以在跨度被破坏时尝试伪造背景。尝试这样的事情，看看它是否适合你：

span {
    background-color: yellow;
    padding: 1px 0;
    box-shadow: 10px 0 0 0 yellow, -10px 0 0 0 yellow;
}

Answer 3

要尽可能多地包含浏览器，您可以在位置上进行转发：相对并使用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样式...跨度是中立的:(

Answer 4

将它包装在容器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？

如何在具有多行的span元素上包含填充

4 个答案: