css - 内容背景被截断

Question

向右滚动，您会看到背景被截断了:

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

p {
  background: green;
}

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

为什么会这样？解决方案是什么？

Answer 1

试试这个代码

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

p {
    background: green;
    float: left;
}

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

p {
  background: green;
  float:left;
}

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