位置：首页>> 网络编程>> 网页设计>> block 和 inline 答案揭晓~ 另付一则，关于 word-break

block 和 inline 答案揭晓~ 另付一则，关于 word-break

作者：棕熊　来源：棕熊@Think Fast　发布时间：2009-12-08 13:06:00　

标签：block,inline,区别,css,word-break:,break-all

在昨天的文章，《 block 和 inline 的区别是？》里，我给大家留了个问题——LI 元素到底是block level 的，还是 inline的？现在让我们来揭晓答案吧——

当当~ 恭喜Duron800同学~ 答对了哟~ 撒花~~

的确，LI 元素既不是 block level, 也不是 inline 的，因为 BODY 元素不能包含 LI 。LI 只能被 OL, UL, DIR 和MENU 这几个元素包含。其中后两个元素已经不被推荐使用了，常用的只有前两个。至于显示上，一个LI 元素默认的 display 属性一般都是 list-item (在比较旧的IE上是block)，一般会被呈现成两个block box (一个是LI 的内容，一个是LI 前面的记号，比如一个小点，或者阿拉伯数字什么的)。

同样道理，DT, DD 这样的标签，因为不能被 BODY 包含，所以也会处于这种两者都不在的状态，真可怜

另外讲个今天发现的，关于 word-break: break-all 的小故事。请大家先看代码——

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>word-break: break-all demo</title><style type="text/css" media="screen">p { border: 1px solid #000; width: 100px; margin: 20px; padding: 20px; font-size: 14px; word-break: break-all;}</style></head> <body> <p>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</p> <p>?????????????????????????????????????????????????????????????????????????????????????????????????</p> </body></html>

立即运行这个demo (记得要用IE哟=v=)

看见了吧，IE 在两个连续的标点之间，是不会正确的呈现break-all 的

其实我本人是极力反对使用break-all 这种东东的，因为作为一个样式属性，活生生地把一个单词从中截断，明显会影响这个词的意义——也就是数据——这个不应该被样式表操作的东西，于是违反了样式表将数据和表现分离的初衷。但是国内做项目么……过度需求也不是什么个别现象了

所以，在很多时候不得不使用到word-break: break-all。但是今天，被tester 的jj 一顿暴利破坏式乱打，居然测出了前面的这个东东

因为以前对这个属性没啥研究，所以特意去问 Dflying gg，这是不是IE的啥bug，结果1居然说，这个不是bug, 是feature，各么我彻底 ft =v=

据1的解释，这个是因为标点符号必须和文字分别处理造成的，但是我翻遍了架空的规范，似乎只找到了说要对CJK（即中日韩）文本的标点作特殊处理，而不考虑其他语言的。对于这个，我们只能耸耸肩，起码IE 能不完全的支持这个CSS3的属性已经很不错了。

在这里，权且写上这么一句，大家以后遇到类似问题起码有个借鉴

最后，向大家求个好用的Windows Live Writer 的语法高亮插件。现在我用的是一个叫 Code Snippet 的东东，但是它生成的样式和我现在的blog 实在不太合拍。不知道有没有什么插件能定制代码块的样式？或者有个方法能定制一下这个插件生成代码的样式也行。先bow了

投稿

block 和 inline 答案揭晓~ 另付一则，关于 word-break

猜你喜欢