IE中不会出现问题, ff则会出现, 症状是, 文章不换行, 会突破div边框的限制, 在外部显示, 严重影响了页面显示的美观和整洁.
网易博客的解决方案是overflow="hidden", 虽然仍然会突破边框, 但会被边框外的部分覆盖, 页面显示不会太受影响, 但也不是最好的解决方法.
我在这里提供一种解决方法, 首先创建wrap.xml, 内容如下
然后新建页面wrap.html, 内容如下:
运行即可看出效果
网易博客的解决方案是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">
asdlfkasdfjlaksjdflajsdlfkajsdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
alskdjflakjsdflajsdlf asdkfjlaksjdf alksjdlfkjasdlfkjalsdjfa
sdf as dfalskdjflkajsdlfkjalsdkjflasdf askdjfasdf asdfa
sdfasdfasdf
</div>
</body>
</html>运行即可看出效果
82
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
