[转]兼容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是默认情...
  • tsuliuchao
  • tsuliuchao
  • 2009年09月16日 10:45
  • 7092

溢出文本显示省略号,兼容常用浏览器

溢出文本显示省略号,兼容常用浏览器最近研究css样式,无意中对 "溢出文本显示省略号" 感兴趣,以前我在这个问题上都是用程序写个截取函数来判断,确定要显示多少个字符,多出规定的字符就用省略号("......
  • ironlee
  • ironlee
  • 2011年02月24日 16:15
  • 2235

IE8 不支持CSS word-wrap属性

     当连续输入英语字符后,由于浏览器默认为一个单词,并不会换行处理,在IE6/IE7 中,我们可以添加css中的word-wrap 属性,实现自动换行。但是在IE8 版本中,该属性不支持。   ...
  • spring21st
  • spring21st
  • 2010年04月27日 14:06
  • 2663

word-break:break-all和word-wrap:break-word的区别

最开始我们说了,word-wrap 是用来决定允不允许单词内断句的,如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行,看看下一行的宽度够不够,不够的话就进行单词内的断句。而wor...
  • u010552788
  • u010552788
  • 2016年06月01日 17:07
  • 944

css属性:word-wrap:break-word; 与 word-break:break-all 的用法;

前言:在一个长宽固定的div容器中,多行文字和英文句子都默认自动换行。不过,对于英语单词而言,会有一些微妙的变化! //没有添加word-wrap:break-word和word-break:brea...
  • zhangq0123
  • zhangq0123
  • 2016年10月19日 11:06
  • 676

不同浏览器下word-wrap和word-break强制换行

强制换行与强制不换行用到的属性         我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而...
  • Cxy_357
  • Cxy_357
  • 2015年10月22日 16:39
  • 485

CSS 单行溢出文本显示省略号...的方法(兼容IE FF)

原文地址:http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/08/06/1793922.html
  • WeLoveSunFlower
  • WeLoveSunFlower
  • 2014年07月21日 10:41
  • 3889

【css】你了解word-wrap和word-break的区别吗?

word-wrap: css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 word-break: c...
  • hongxiaoshuang
  • hongxiaoshuang
  • 2016年11月04日 17:20
  • 632

table-layout :fixed white-space: nowrap word-break:break-all和word-wrap:break-word

设置表格布局算法: table { table-layout:fixed; } 亲自试一试 浏览器支持 IE Firefox Chrome Safari ...
  • dotNET25
  • dotNET25
  • 2014年05月23日 10:20
  • 1803

word-wrap:break-word与word-break:break-all的关系及强制换行与强制不换行问题

word-wrap:break-word与word-break:break-all的关系:word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句...
  • javaloveiphone
  • javaloveiphone
  • 2016年03月18日 16:32
  • 1424
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[转]兼容IE firefox(FF下不认word-break及word-wrap),解决文字溢出的问题
举报原因:
原因补充:

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