<html>
<head>
<title>无标题文档</title
<style type="text/css">
div#outter {width:200px;height:auto;}
div#wrapper {}
p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
div#footer {clear:both;}
</style>
<div id="outter">
<div id="wrapper">
<p>ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
</div>
<div id="footer"></div>
</div>
</body>
<head>
<title>无标题文档</title
<style type="text/css">
div#outter {width:200px;height:auto;}
div#wrapper {}
p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
div#footer {clear:both;}
</style>
</head>
<div id="outter">
<div id="wrapper">
<p>ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
</div>
<div id="footer"></div>
</div>
</body>
</html>
1、最开始,div#wrapper没有设置任何样式,<p></p>中内容显示正常,过长部分省略号显示,如图1:
(图1)
2、将div#wrapper设置为
div#wrapper {float:left;}
此时,<p></p>中内容就会完全显示,不能达到省略号显示效果,如图2:
(图2)
3、给div#wrapper添加“width:auto”
div#wrapper {float:left;width:auto;}
<p></p>中内容仍然会完全显示,不能达到省略号显示效果,如图3:
(图3)
4、给div3#wrapper指定一个宽度,这里设置为父元素的100%
此时,<p></p>中内容能达到预期效果,如图4:
(图4)
所以,是包裹<p></p>的div#wrapper设置为float后,其位置虽然还是根据父元素div#outter定位,但是其宽度并不受父元素限制。
因而,当一个元素设置为float后,必须为其指定具体的width。
解释可能不太正确,欢迎指正!