[转]兼容IE firefox(FF下不认word-break及word-wrap),解决文字溢出的问题

转载 2011年01月24日 16:01:00

在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下都能实现换行

程序代码
<style type="text/css">
.wordwrap
{
     word-wrap:break-word;
     word-break:break-all;
    -moz-binding: url('./wordwrap.xml#wordwrap');
     overflow: hidden;
}
</style>

当然,在调用前你首先要给你那容器一个宽度值,例如<div style="width:100px" class="wordwrap">需要换行的内容其中里面有个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);                    
                     elem.innerHTML = newTxt;
                 },false);                
                 function reconstructTag(_tag)
                 {
                     return _tag.replace(/​/g, '');
                 }
             //]]>
         </constructor>
     </implementation>
</binding>
</bindings>

需要说明的是:使用-moz-binding: url('./wordwrap.xml#wordwrap');时,一定要有overflow: hidden;

*有个问题,这个函数会在每个字符后面加一个&#8203;有时候如果内容中有&nbsp;这种处理方式会将"&nbsp;"显示出来,而不是显示出空格。

 

相关文章推荐

换行word-wrap与word-break兼容IE和FIREFOX

word-wrap是控制换行的。使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。word-break是控制是否断词的。normal是默认情...

JS在IE和FF下不兼容的问题及部分解决办法

下面列出JS在IE和FF下不兼容的方法 1、Dom操作 var wrongGet = obj.firstChild; var wrongGet = obj.lastChild; var wro...

溢出文字处理CSS属性——text-overflow、word-break、word-wrap和white-space

一、首先依次介绍这几个文字处理的CSS属性 1、word-break:  word-break 属性规定自动换行的处理方法。 当行尾放不下一个单词时,决定单词内部该怎么摆放。  b...

JSF richfaces的dataTable组件中filter在IE和Firefox下不兼容的问题

JSF richfaces的dataTable组件是一个用于显示列表数据的控件,可以方便地支持数据分页,条件过滤等常用功能,其中的filter就是用于根据用户的输入过滤出符合条件的记录,但是filte...

css 长单词不换行溢出容器的解决方法 word-wrap与word-break

这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句,又或者是因为这两个东西实在是...

word-wrap,word-break,white-space,text-overflow的区别和用法 文字处理方法

word-wrap,word-break,white-space,text-overflow的区别和用法 在div中,文本布局经常出现,换行混乱的情况。 问题表现:1.如果...

WebOffice在线编辑ActiveX插件(Excel,word等),兼容IE,FireFox,Chrome等浏览器

关于点聚的weboffice ActiveX插件的使用在IE下只需要安装对应weboffice.ocx插件即可实现在线文档编辑。对于非IE如谷歌、火狐浏览器来说就有些不同了的,如果想要兼容谷歌和火狐需...

网站商铺格式问题 : style="word-wrap:break-word;table-layout: fixed;"

最近总是有客户反映,网站商铺格式错乱,联系方式样式总被打乱,不知道是什么原因导致的形式严重变型,把我给折磨的,查看模板,模板没有问题,查看css也没有问题,格式使用的百分号,按理说就没有问题了,可是偏...

text-wrap、text-wrap、word-break、word-spacing、white-space等文字排版CSS总结

word-wrap text-wrap word-break word-spacing white-space
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[转]兼容IE firefox(FF下不认word-break及word-wrap),解决文字溢出的问题
举报原因:
原因补充:

(最多只允许输入30个字)