-
2008-11-21
用CSS实现DIV中自动换行,并且里面的内容不准截断的方法. - [CSS文章]
版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://leiglen.blogbus.com/logs/31593869.html
一个很变态的需求,要求外层的DIV自动换行,里面是一堆的子DIV,这些子DIV在父层DIV自动换行的时候,不准截断.
代码:
<div id="wrap">
<div>111111111</div><div>2222222222</div><div>3333333333</div><div>44444444444</div><div>55555555555</div>
</div><style type="text/css">
#wrap{width:200px;background:#ccc;white-space:normal;}
#wrap div{
display:inline;white-space:nowrap;
}
</style>说明:
主要是利用
white-space属性:可能的值
值 描述 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 随机文章:
7周年 2009-11-04第二次团契 2009-11-042009-11-04 2009-11-04纯CSS实现圆角的代码 2008-11-28CSS滤镜使用方法汇总 2008-11-20
收藏到:Del.icio.us








评论