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;

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

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

The text overflows it's 50px size and into the 10px padding. Is that by design? If so it seems pretty dumb - padding isn't padding if it's got stuff in it! Or am I just doing something wrong?

Regards, CSS newbie.

Answer 1

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 2

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 3

To do this, I created two divs: one main one, and one wrapper. I ended up defining a height for the inner main div and hiding overflow, and it solved the problem. Here is the code:

div.wrap {
  padding: 10px 10px 14px 10px;
  border:1px solid #000000;
  width: 200px;
  height: 70px; 
 }
div.main { 
  line-height: 1.3em;
  overflow:hidden; 
  width: 200px;
  height: 60px; /* PLAY WITH THE HEIGHT so that you can essentially use it to cover up the overflow */
 }

  <div class="wrap"><div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div>

The wrapper has the padding and the border (among other attributes). The main has a height and the overflow attribute - these are the ones that solve the problem. Feel free to test and you'll see that no matter how many words are added to the main div, they will not be shown partially, or at all. Cross-browser, too.

Answer 4

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

Answer 5

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 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.. */
}

Answer 7

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.