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;
}

＆＃13;

div {
  width: 300px;
  overflow: auto;
}

p {
  background: green;
  float:left;
}

＆＃13;

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

＆＃13;

Answer 2

在与width相同的元素中使用overflow和background。我编辑了代码段

＆＃13;

div {
  width: 300px;
  overflow: auto;
}

p {
  display: inline-block;
  background: green;
}

＆＃13;

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

＆＃13;

Answer 3

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


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

    p {
      background: green;
    overflow: auto;
    }

Fiddler link https://jsfiddle.net/o0eqoqmh/

Answer 4

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

＆＃13;

div {
  width: 300px;
  overflow: auto;
}

p {
  background: green;
  display: inline-block;
  /* OR 
  display: inline;
  */
}

＆＃13;

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

＆＃13;

内容背景被切断

4 个答案: