텍스트 오버 플로우 문제 및 텍스트 비 랩

Question

시나리오 : 하나의 헤더 DIV와 세 개의 DIV가 나란히 놓여 있습니다.

문제 : HEADER_A div의 "Text"가 HEADER_B DIV에 오버플로되어 있습니다.

스크린 샷/CSS :

alt text http://thumb0.webshots.net/t/74/174/8/92/12/2239892120105349420zNlkOc_th.jpg

#header{ 
height:127px; 
width: 718px; 
} 

#header_a { 
    width:181px; 
    height: 127px; 
    color:#FFFFFF; 
    float:left; 
} 

#header_b{ 
width: 363px; 
float:left; 
height: 127px; 
/*background-image:url(../images/logo.jpg);*/ 
background-position:bottom; 
background-repeat:no-repeat; 
background-color:#006600; 
} 

#header_c{ 
width: 174px; 
float:left; 
height: 127px; 
} 

<div id="header"> 
     <div id="header_a">ddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div> 
     <div id="header_b"></div> 
     <div id="header_c"><img src="images/nuevo.png" /></div> 
    </div> 

Answer 1

ddddddddddddddddddddddddddddddddddddddddddddddddddddddd은> 181px입니다.

하나의 단어로 취해지고 단어가 분리되지 않기 때문에 분명히 오버플로가납니다. 일부 적절한 텍스트를 사용하여 시도하거나 "ddddddddddd ddddddddddddd ddddddddddddddddd dddddddddddddd"와 같은 일부 공간을 제공

편집 : 같은 이미지에 발생하는 반면에

. 따라서 div보다 상위에있는 div의 모든 항목이 오버플로됩니다. 사용해 볼 수 있습니다 'overflow:hidden'