问题:如下图

 

这个时候,右边有一撮的元素,自动排列,不知道宽度。

右边常见的写法有两种
1 div>a*n 这种情况下,a不需要浮动
这个时候,我试了,word-break和word-wrap.在各浏览器下表现不一致。
转而改成,a:{display:block;float:left;white-space:nowrap;}这样就OK了


2 ul>li*n>a 这种情况下,li左浮动
这时候同样按照上面的样式写就OK了。

关于word-break,word-wrap,white-space
1 white-space:  是否折行 。参考w3school的属性
可取的值:其中inherit属性,ie8以下不支持
normal    默认。空白会被浏览器忽略。
pre    空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap    文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap    保留空白符序列,但是正常地进行换行。
pre-line    合并空白符序列,但是保留换行符。
inherit    规定应该从父元素继承 white-space 属性的值。

上面一个是通用属性,下面两个是ie专有的
2 word-wrap
normal: 允许内容顶开指定的容器边界
break-word: 内容将在边界内换行。如果需要,词内换行word-break也将发生

3 word-break
normal : 允许在词间换行
break-all: 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

 

总结:
word-wrap: break-word; 和 word-break: break-all;,两者都将文本限定在了容器的范围内。
观察这里的显示。http://dancewithnet.com/lab/2008/word-break-all/
单词,纯字母加空格。
1,word-wrap.
ie和firefox大体一致。对单词换行,对符号的换行处理不一致。
2,word-break.
firefox下。一个单词结束才换行。
ie下。彻底的换行,不能超出边界,但是不能处理符号。
只是 break-all 将所有单词,不论长短地,通通截断,break-word 它尽量地遵从了排版规则。
总的来说,以上两属性在两浏览器中表现不一致。因为不是w3c的标准属性。而white-space这个属性是所有浏览器通用的标准属性。

这里是我总结的关于换行的规则 http://www.riyue.me/file/csstest/newline.html

posted on 2012-06-06 17:28  日—月  阅读(212)  评论(0编辑  收藏  举报