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

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

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.