风格化内联元素的中断

Question

我有一个 <div>，它包含两个 <span>（或更多）。如果两个 <span> 的宽度都超过了它们父元素 <div> 的宽度，那么它们就会像您期望的内联元素那样换行。但是，我正在为每个 <span> 应用边框和背景颜色。由于换行，边框断开，然后在下一行以及背景上继续。

根据示例图像的前半部分，您可以看到背景颜色在第一行的最后一个字符之后立即停止，没有填充，右侧也没有边框。在下一行的开头，边框和背景紧接在第一个字符之前开始，没有填充。

根据我希望它在图像的后半部分看起来像什么的示例，我想要的是一种在换行符所在的位置添加填充和边框的方法，以便换行符看起来像两个视觉上不同的 <span>s，但实际上是一个单一元素。视觉上有三个，但功能上只有两个元素。

值得注意的是，我想将其保留为一个 <span> 的原因是因为 <span> 的内容是动态的，[= 的宽度总是有可能42=] 发生变化，mouseenter 和 mouseleave 事件附加到 <span>。

我还没有找到执行此操作的方法。我在 MDN 上找到的关于此行为的大部分信息充其量是有限的。（Info 1, Info 2). I've found a similar question，但不一样。至少，我可以放弃对边界和边界半径的希望，而只接受一些填充到行尾和行首换行。

根据我目前发现和阅读的内容，我怀疑这可能是不可能的。如果无法使用原生 CSS，我的第一直觉是使用 Javascript 来维护两个离散的框，并在文本或宽度发生变化时自动调整换行的位置，但这听起来像是头痛半天

如果您有兴趣，这里是 basic JSFiddle。

Answer 1

span是内联元素，可以尝试将span属性设置为内联元素display:inline-block

Answer 2

我认为您正在寻找 box-decoration-break: clone;。对于 Chromium 和 webkit 浏览器，您需要在属性前加上 -webkit- 前缀。所以

div {
  border: 1px solid lightgray;
  width: 600px;
  margin: 10px 0;
}

span {
  background-color: gray;
  border: 3px solid red;
  border-radius: 4px;
  line-height: 1.7em;
  margin: 1px;
  padding: 2px 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</span>
</div>

风格化内联元素的中断

Stylize the break of an inline element

html

css

inline