我有一個<div>包裝兩個<span>（或更多）的。如果兩個<span>s的寬度都超過了它們的 parent 的寬度<div>，那么它們會像您期望的行內元素那樣進行換行。但是，我對每個<span>. 作為換行的結果，邊框會中斷，然后在下一行以及背景上繼續。
根據示例影像的前半部分，您可以看到背景顏色在第一行的最后一個字符之后立即停止，沒有填充，右側也沒有邊框。在下一行的開頭，邊框和背景在第一個字符之前開始，沒有填充。
從我希望它在影像的后半部分看起來像的示例中繪制，我想要的是一種向換行符所在的位置添加填充和邊框的方法，以便換行符看起來像兩個視覺上不同的<span>s，但實際上是一個單一的元素。視覺上有三個，但功能上只有兩個元素。
值得注意的是，我想保留它的原因<span>是因為 的內容<span>是動態的，視窗的寬度總是有變化的可能性，并且有一個mouseenter和一個mouseleave事件附加到<span>.
我還沒有找到一種方法來做到這一點。我在 MDN 上找到的有關此行為的大部分資訊充其量是有限的。（
uj5u.com熱心網友回復：
我想你正在尋找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>uj5u.com熱心網友回復：
span 是行內元素，可以嘗試將span屬性設定為行內袁術 display:inline-block
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360138.html
上一篇：根據子元素的高度（絕對位置）增加元素的父元素高度（相對位置）
下一篇：如何懸停第n個孩子的行