FIREFOX / IE Word-Wrap:Word-Break问题

Posted 10月 23, 2007

用的是wpzone.net的fresh wordpress主题，很烦人的是在Internet Explorer下如果content或sidebar的内容部分一行的内容过长，则经常出现sidebar被挤到页面最下端的情况，而在firefox下没有此种现象。一般出现在如下几种情况：

图片太大超过了width
url太长没有正常换行，超过了width
代码太长没有正常换行，超过了width

究其原因是因为对于无空格连续长字符，IE与Firefox将它看成是一个长单词了，因此不会自动换行。

对于IE，可以通过IE专有的CSS属性word-wrap即可实现自动换行：word-wrap:break-word;

对于Firefox，CSS2标准并没有定义类似word-wrap的属性，可以通过overflow属性将撑出的部分隐藏：overflow:hidden

因此为了兼容性，可以使用如下方法：

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

修改fresh theme的style.css文件，在#content和#sidebar中增加上述属性以及pre属性

#content {
color:#000;
display:inline;
float:left;
font-size:14px;
line-height:1.5em;
text-align:left;
width:635px;
margin:13px 0 0 20px;
padding:0 0 20px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar {
display:inline;
background-color:#fff;
float:right;
font-size:12px;
width:230px;
line-height:1.4em;
padding:20px 20px;
margin:15px 20px 15px 0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

另外对于firefox和opera可以采用javascript方式来避免overflow:hidden的弊端，具体实现可以参考：

Script word-wrap to Firefox - updated version