CSS: Is it correct that text content of a div overflows into the padding?

Question

I expected that the padding inside a div would remain clear of any text. But given the following html/css, the content-text spills out into the padding;

        
                      

              相关标签:
       
      

Answer 1

The only way i could see this working is by getting rid of the width: 50px...other than that i stumped!?

Answer 2

Another approach is to use an outline-right as a pseudo-padding. First reduce the width of your element by 10px (to account for the extra amount the outline will extend forth). Then add a 10px solid red outline-right to your element. The outline will cover any 'hidden' text.

If there are any elements that appear to the right of foo, be sure to add 10px to its right margin (because the outline will not push them aside like a normal width extension would).

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 10px;
  width: 40px;
  border: 1px solid green;
  outline-right: 10px solid red;
  margin-right: 10px;

}

Answer 3

This is the correct behavior. overflow: hidden will clip content that extends outside the box. Padding is inside the box, so content will happily overflow into that space if necessary.

(source)

To get the effect you seem to be aiming for, one solution is wrap your div.foo in an another div and set the background on that one instead, like this:

<div class="foowrapper">
    <div class="foo">purrrrrrrrr</div>
</div>

.foo {
    overflow: hidden;
    width: 40px;
}
.foowrapper {
    padding-right: 10px
    background: red;
    border: 1px solid green;
}

Answer 4

It is by design as overflow: hidden uses the border as its clip so contents will flow into the padding.

You can use a box-shadow here that is the same color as your background to generate some fake padding that the text won't flow into.

box-shadow: 0px 0px 0px 5px black;

You'll have to adjust margins and padding to account for this but its the most painless solution I've found so far.

Answer 5

It is because you have constrained the width of the div to 50px causing the text to spill into the padding. Remove that width statement and the div will expand and contract with the size of the txt within it.

<div class="foo">helloworld</div>

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 10px;

  border: 1px solid green;
}

Hope that helps you.

Answer 6

I just ran into this issue as well and don't like the way it works. No matter how large the cat gets, the padding will always be between it and the box! Therefore, when using overflow: hidden, the content should be hidden when it reaches the padding.

Here's a hack that doesn't work in case you want a border, but might for some (me): use the borders as padding.

<div class="foo">helloworld</div>

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 0; /* Removed the padding. */
  width: 50px;
  border-right: 10px solid red; /* 10px, background color or transparent. */
  box-sizing: border-box; /* I prefer this one too.. */
}