Css 内容背景截断

向右滚动，您将看到背景被截断：

div{ 宽度：300px； 溢出：自动； } p{ 背景：绿色； } ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText

试试这个代码

---

这是因为p没有得到它的实际宽度

p {
    background: green;
    float: left;
}

div{ 宽度：300px； 溢出：自动； } p{ 背景：绿色； 浮动：左； } ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText

在同一元素中使用宽度和溢出作为背景。我已经编辑了这个片段

div{ 宽度：300px； 溢出：自动； } p{ 显示：内联块； 背景：绿色； } ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText

---

Fiddler链接

或者您可以将p设置为内联或内联块元素

div{ 宽度：300px； 溢出：自动； } p{ 背景：绿色； 显示：内联块； /*或 显示：内联； */ } ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText

---

为什么会这样？什么是浮动：左；是吗？这是因为p没有得到它的实际宽度。通过应用float，它得到了它的完整宽度，它缩小了滚动条和文本之间的空间，即段落边距超出了滚动条。然后，你可以简单地使用display:inline block来显示。但这不是一个好主意。如果需要这种输出，我建议使用span`而不是p。我已经编辑了上面的片段

<div>
  <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
</div>  


div {
      width: 300px;
      overflow: auto;
    }

    p {
      background: green;
    overflow: auto;
    }