自动调节表格高度,强制换行

style= "word-break:break-all; "


使用table-layout:fixed;强制table的宽度,

内层td,th采用word-break :break-all;或者word-wrap : break-word;换行,

使用overflow:hidden;隐藏超出内容

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

程序代码

当然,在调用前你首先要给你那容器一个宽度值,例如

需要换行的内容其中里面有个wordwrap.xml,这个文件的内容如下:

程序代码




    
        
             //              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, '');
                 }
             //]]>
        

    


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

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

你可能感兴趣的:(css)