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

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.