[转]解决层DIV内文字溢出

转载自: http://hi.baidu.com/howchi/blog/item/bf514ae99d314437b80e2d1e.html

 1 <html>
 2 <head>
 3 <title>层内文字溢出</title>
 4 <style type="text/css">
 5 <!--
 6 body,ul,li,form,p,dl,dt,dd,h1,h2,h3,h4,h5,h6,img{
 7 list-style: none;
 8 margin: 0;
 9 padding: 0;
10 }
11 #layout{
12 margin: 0 auto;
13 width: 600px;
14 }
15 #main{
16 background: #FFEBCD;
17 float: left;
18 width: 400px;
19 height: 500px;
20 }
21 #right{
22 background: #6495ED;
23 float: left;
24 width: 200px;
25 height: 500px;
26 }
27 -->
28 </style>
29 </head>
30 <body>
31 <div id="layout">
32  <div id="main"> </div>
33  <!--注释-->
34  <div id="right">溢出溢出溢出</div>
35 </div>
36 </body>
37 </html>

　　将上述代码保存成HTML文件，然后用IE打开浏览时会发现在底部有文字溢出，要解决这个问题，很简单，在该文字层外再嵌套个<DIV>，经测试问题解决。具体如下：

把body区域改为

<div id="layout">
   <div id="main"> </div>
   <div>
   <div id="right">溢出溢出溢出</div>
    </div></div>

此方法适用于各类层内容溢出。

总结: 文字溢出时,在文字外面增加div, 并设置该div的宽度即可实现换行的效果!

posted on 2011-07-24 02:47 DavidYanXW 阅读(1979) 评论(0) 编辑收藏举报