内容重叠div

Question

我遇到重叠内容的问题。当我尝试使用HTML代码时，content_left中的文本与我希望包含的整个区域重叠。当我将高度更改为自动时，它不能解决问题。内容重叠到右侧，底部被切断。

<div id="wrapper"> 

    <div id="header"> 

     <div id="logo"> 
     </div> 

     <div id="header_right"> 
     </div> 
    </div> 
<div class="content_left"> 
hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh 
hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh 
hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh 
hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh 
hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh 
hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh 
hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh 
hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh 
hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh 
hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh 
hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh 
hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh 
</div> 

<div class="content_right"> 
</div> 

<div class="footer"> 
    Footer goes here 
</div> 
</div> 

CSS

#wrapper { 
height: 1500px; 
margin: 20px auto auto auto; 
padding: 0; 
background: url(wrapper.png); 
} 

.content_left { 
float: left; 
width: 600px; 
padding: 20px 0 0 30px; 
margin-left: -300px; 
position: relative; 
height:auto; 
} 

例jsfiddle Example

Answer 1

它，因为在字符串（字）没有空间尝试

.content_left{overflow:hidden;} 

，我不认为任何有效的字符串（字）只要你的

Answer 2

看到完整的小提琴，我可以做评论是

• 从#wrapper
• 删除height:700px;上#wrapper
• 添加overflow:hidden在.content_left
  （这将使单词添加word-wrap: break-word; - 因为您的文字太长而无法放入单行中。）

结果可以看到蜜蜂在http://jsfiddle.net/gaby/L6acE/1/

---

支持此功能可以在http://caniuse.com/#search=word-wrap可以看出