加载中…兼容Ie firefox，解决文字溢出的问题
(2008-10-06 10:19:03)
标签：
it |
分类： 网络技术 |
在IE里实现文字换行只要使用word-wrap:break-word;word-break:break-all;就可以了，但是它在firefox里是不认的。在网上查了好久都没有发现在firefox下很好的解决办法，比较多的就是用js实现~
后来终于找到一篇文章，比较详细的介绍了文字换行的方法。地址是 http://fancy.ifcare.net/web/word-wrapword-break.html
其中在firefox下解决换行难题的除了JS方法外，还有个国外的经典解决办法。详细内容可以见 http://ecmascript.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
演示可以看：http://ecmascript.stchur.com/blogcode/emulating_word_wrap/ （在firefox下演示）
此方法使用的是firefox里调用一个XML现实将文字填充来解决的办法。具体有什么作用你可以看看作者原文。
我总结后写了一个CSS，可以在IE和firefox下都能实现换行
当然，在调用前你首先要给你那容器一个宽度值，例如<div style="width:100px" class="wordwrap">需要换行的内容</div>
其中里面有个wordwrap.xml，这个文件的内容如下：
<?xml version = "1.0"?>
<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;
elem.addEventListener('overflow',
function()
{
var exp =
/<\/*[_\s="'\w]+>/g;
var txt = elem.innerHTML;
var chars = txt.split('');
var newTxt =
chars.join('');
newTxt = newTxt.replace(exp,
reconstructTag);
后来终于找到一篇文章，比较详细的介绍了文字换行的方法。地址是 http://fancy.ifcare.net/web/word-wrapword-break.html
其中在firefox下解决换行难题的除了JS方法外，还有个国外的经典解决办法。详细内容可以见 http://ecmascript.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
演示可以看：http://ecmascript.stchur.com/blogcode/emulating_word_wrap/ （在firefox下演示）
此方法使用的是firefox里调用一个XML现实将文字填充来解决的办法。具体有什么作用你可以看看作者原文。
我总结后写了一个CSS，可以在IE和firefox下都能实现换行
http://queyang.com/blog/images/code.giffirefox，解决文字溢出的问题" /> 程序代码
<style
type="text/css">
.wordwrap
{
word-wrap:break-word;
word-break:break-all;
-moz-binding: url('./wordwrap.xml#wordwrap');
overflow: hidden;
}
</style>
.wordwrap
{
}
</style>
当然，在调用前你首先要给你那容器一个宽度值，例如<div style="width:100px" class="wordwrap">需要换行的内容</div>
其中里面有个wordwrap.xml，这个文件的内容如下：
http://queyang.com/blog/images/code.giffirefox，解决文字溢出的问题" /> 程序代码
<?xml version = "1.0"?>
<bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml">
<binding id = "wordwrap" applyauthorstyles = "false">