昨天遇到了一个问题。是关于如果英文或数字字符串太长,在没有空格等分开的情况下 在网页里不能自动分行的问题(字符串会一直向右延伸,直到超出页面为止)。解决方法要求火狐和IE都要支持。 上网查了一下,查到了几个方法。现在总结一下。
首先是在网上查到了一种CSS方法,但仔细研究了一下,发现火狐不支持。方法如下:
使用 word-break:break-all;
以下是该属性其它值的详细介绍:
normal:默认值。允许在词间换行
break-all:该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all:与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
这个方法由于有局限性,所以我没有采用,只是列在这里。
之后找到了两种方法,可以再Firefox和IE下都工作很好。
一种是在Div下添加CSS样式。方法如下:
添加 overflow:hidden;
该方法可以使超出边界的字符串隐藏起来,避免其破坏页面。理论上这不是一种折行方法,但其可以解决这方面的问题(避免破坏页面效果)。所以也列在这里了。
最后的方法,是使用javascript编码,将字符串硬分开,使其分行。有点是可以真正的进行很行,缺点是改变字符串结构,在中间加了几个‘ ’ 空格。我觉得网上找到的方法不是很好,自己改了一下。下面是我改写的方法:
function toBreakWord(aString,intLen){
var strTemp="";
while(aString.length>intLen){
strTemp+=aString.substr(0,intLen)+" ";
aString=aString.substr(intLen,aString.length);
}
strTemp+=" "+aString;
return strTemp;
}
//if your string is not for "createTextNode" function, you should replace ' ' to
注:本文部分引自《在MOZ(firefox)下使没有空格的英文折行》http://space.flash8.net/space/?2248/action_viewspace_itemid_367043.html
分享到:
相关推荐
管他什么技术 做出来就行 白猫黑猫,抓住老鼠就是好猫
不过这个方法并非我原创,是偶然看到一网友写的(来源不清楚了,因为我看到的也是转载),但是用起来还是有些缺陷,是属于那种,看起来已经解决了,但是并不能用于实处的那种,经过我改动,已经可以用于实处了 对了,里面没说明...
英文字符自动换行,通过js脚本截断字符串,此方法通用ie6,ie7,firefox,使用CSS控制强制换行实现不了的朋友可以尝试下
css 自动换行 强制换行属性,在实际应用中,如果不强制换行会导致页面变形很难看,所以用下面的方法,即可解决此类问题。
FireFox文本自动换行处理,如何实现FireFox文本自动换行 文本自动换行IE中解决方法: word-wrap:break-word;word-break:break-all; 注:在要换行的内容相应的单元格或者DIV里加入,如: <div xss=removed></div>或...
自动换行五种策略,兼容IE Chrome Firefox
JavaScript在IE和Firefox(火狐)的不兼容问题解决
FireFox下文本域换行FireFox下文本域换行FireFox下文本域换行FireFox下文本域换行
解决IE6 IE7 Firefox中li兼容问题
在后台加上即可解决IE9,firefox下面的问题: HttpServletResponse response =ServletActionContext.getResponse(); response.setContentType("text/html");
越发感觉网页设计人员的辛苦,就一个自动换行,
IE+Firefox浏览器下搭建EBS的Form环境,实现IE,Firefox下Form同时工作
CSS在firefox和ie下的兼容性问题,是最让网页设计师头痛的事。在IE下测试明明是正常的,到了火狐下就变样了。这样一来还得重新修改,最怕改好后在IE下又不兼容了。这里介绍一下css在火狐和ie下的兼容要点。
在Firefox下直接调用IE浏览器(IETab这个插件).zip
IE6.0、IE7.0 与FireFox CSS兼容的解决方法
解决firefox下resize事件无效问题
Firefox填写表单扩展 安装方法很简单,直接拖拽到火狐浏览器窗口中然后根据提示操作即可。 随时关注最新版: http://code.google.com/p/ffextension/downloads 火狐官方下载地址: ...