Firefox下自动换行的解决方案

42087743 · 发表于 2013-2-8 00:05:54

IE中不会出现问题, ff则会出现, 症状是, 文章不换行, 会突破div边框的限制, 在外部显示, 严重影响了页面显示的美观和整洁.
网易博客的解决方案是overflow="hidden", 虽然仍然会突破边框, 但会被边框外的部分覆盖, 页面显示不会太受影响, 但也不是最好的解决方法.

我在这里提供一种解决方法, 首先创建wrap.xml, 内容如下
<?xml version="1.0" encoding="UTF-8"?><bindings xmlns="http://www.mozilla.org/xbl"xmlns:html="http://www.w3.org/1999/xhtml"><binding id="wordwrap" applyauthorstyles="false"><implementation><constructor>//<![CDATA[var elem = this;doWrap();elem.addEventListener('overflow', doWrap, false);function doWrap(){var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false); while (walker.nextNode()){var node = walker.currentNode;node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));}}//]]></constructor></implementation></binding></bindings>
然后新建页面wrap.html, 内容如下:
<!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><title></title><meta http-equiv="Content-Type"content="text/html; charset=utf-8" /><style>.wordwrap { 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+ */-moz-binding: url('./wordwrap.xml#wordwrap'); }</style></head><body><div style="width:200px;border:1px solid red;"class="wordwrap">asdlfkasdfjlaksjdflajsdlfkajsdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalskdjflakjsdflajsdlf asdkfjlaksjdf alksjdlfkjasdlfkjalsdjfasdf as dfalskdjflkajsdlfkjalsdkjflasdf askdjfasdf asdfasdfasdfasdf</div></body></html>

运行即可看出效果

		自动登录	找回密码
密码			立即注册