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

Question

jsfiddle here.

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

但是，在较小的设备上，这行文本会变成两行、三行等。这会导致第一行和第二行'lose'右侧的填充[=38] =]边，比如"the"和"to"两个字，第二行和第三行到'lose'的左边边的padding，这样如下图中的"highlight"和"better"两个字：

如何保证这些字（上图中，"the"、"highlight"、"to"、"better" ) 和所有其他单词在左侧和右侧保持这个 10px 的填充？

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

Answer 1

您可以尝试使用 box-shadow 在 span 中断时伪造背景。试试这样的东西，看看它是否适合你：

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>

Answer 2

只需将其包装在容器中 div 并将水平填充放在该元素上，因为这正是您真正想要的：

<div class="span-container><span>my text</span></div>

.span-container { padding: 0 10px; }
.span-container span { background-color: yellow; padding: 1px 0; }

这里有一个 fiddle 证明这完全可以实现您想要的效果，而无需在所有浏览器中都不起作用的解决方法：https://jsfiddle.net/xg1bkgmn/

span 是一个内联元素，在只突出显示文本和加宽行的情况下使用它是有意义的。然而，为了保持整个东西被填充，它需要一个块元素容器，这是标准做法。

既然解决方案如此简单，为什么还要使用更复杂的 CSS？

Answer 3

使用 box-decoration-break CSS.

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

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

Answer 4

要包含尽可能多的浏览器，您可以继续 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 样式...跨度是中性的 :(

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

How to include padding on a span element that has multiple lines

html

css

highlight

padding