文本溢出问题& 文本不换行
设想: 一个头球DIV和三个并排的DIV向左飘去。
问题: HEADER_A div 中的“文本”溢出到 HEADER_B DIV 中,依此类推。
屏幕截图/CSS:
替代文本 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>
Scenario:
One header DIV with three DIV's inside side by side floated left.
Problem:
"Text" from HEADER_A div is overflowing into HEADER_B DIV and so on.
Screenshot / 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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
dddddddddddddddddddddddddddddddddddddddddddddddddddd 是 > 181 像素。
它显然会溢出,因为它被视为单个单词并且单词没有被分解。 尝试使用一些适当的文本或给出一些空间,例如“dddddddddddddddddddddddddddddddddddddddddddd”
编辑:
另一方面,图像也会发生同样的情况。 因此 div 中任何大于其父级的内容都会溢出。 您可以尝试使用
'overflow:hidden'
ddddddddddddddddddddddddddddddddddddddddddddddddddddddd is > 181px.
Its obviously going to overflow because its taken as a single word and words are not broken up. Try using some proper text or give some space like "ddddddddddd ddddddddddddd ddddddddddddddddd dddddddddddddd"
EDIT:
on the other hand the same will happen to images. So anything within the div that is larger than its parent will overflow. you can try using
'overflow:hidden'