`
willko
  • 浏览: 387133 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

firefox和opera不支持word-wrap:break-word的解决方法

阅读更多
我看过很多个解决方法,综合修改出这个。。支持ie/ff/op/sf
这里的浏览器检测代码来自jQuery。。


var userAgent = navigator.userAgent.toLowerCase();
    var browser = {
                    version: (userAgent.match(/.+(?:rv|it|ra|ie)[/: ]([d.]+)/) || [])[1],
                    safari: /webkit/.test(userAgent),
                    opera: /opera/.test(userAgent),
                    msie: /msie/.test(userAgent) && !/opera/.test(userAgent),
                    mozilla: /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent)
                };
    
    function toBreakWord(str, intLen){  
        var strTemp = '';
        if ((browser.mozilla || browser.opera) && str.length > intLen) {
            while(str.length > intLen){ 
                strTemp += str.substr(0,intLen)+" ";
                str = str.substr(intLen, str.length);
            } 
            str = strTemp + str;
        }
        
        document.write(str);
    } 



使用方法
<div style="width:25px;border:1px solid;word-break:break-all;"><script type="text/javascript">toBreakWord('fffffffffffffffffffffffffffffffffffffff', 3)</script></div>
分享到:
评论

相关推荐

    word-break:break-all和word-wrap:break-word区别总结

    值得注意的是,`word-break` 属性在某些浏览器中可能存在问题,如Opera和Firefox可能不支持,这时可以考虑使用 `white-space:normal` 作为替代方案。此外,使用空格分隔单词而不是使用` `(非破折号空格)也是确保...

    CSS3文本换行word-wrap解决英文文本超过固定宽度不换行

    `word-wrap`属性在现代浏览器中的兼容性非常好,包括Chrome、Firefox、Safari、Opera和Internet Explorer 8及以上版本。这意味着你可以在大多数设备上安全地使用这个属性,为用户提供一致的视觉体验。 ### 3. `word...

    使用word-wrap来防止文字溢出

    对于不支持 `word-wrap` 的浏览器,如 Firefox 3.0 和 Opera,可以使用 `overflow-x:hidden` 来隐藏溢出的内容。然而,这种方法虽然解决了溢出的问题,但也可能导致部分内容无法被用户看到。因此,为了更好的跨...

    html中的div、td 、p 等容器内强制换行和不换行的实现

    在跨浏览器兼容性方面,需要注意`word-break`属性在某些浏览器(如Opera和Firefox)中可能不受支持,这时可以使用`white-space:normal`来替代,以确保在多种浏览器下的正常换行。然而,单纯使用空格来代替单词间的...

    CSS强制性换行的方法区别详解

    - `word-break:break-all` 在IE5以上版本得到支持,但Opera和Firefox可能不支持。可以使用 `white-space:normal` 替代 `word-break` 在Firefox和IE下达到类似效果。然而,这样做可能会影响百度快照的展示,且需要...

    超出部分自动换行兼容多浏览器

    而其他如 `-moz-pre-wrap`, `-hp-pre-wrap`, `-o-pre-wrap`, `-pre-wrap`, `pre`, 和 `pre-line` 是为了兼容早期的浏览器版本和特定环境,例如Mozilla Firefox、Opera等。 另外,还可以通过添加 `word-break: break...

    多浏览器支持CSS 容器内容超出(溢出)支持自动换行

    ` 和 `word-wrap: break-word;` 配合使用,确保文本可以按照单词边界或者字符边界进行换行。 - `white-space` 的一系列值是为了兼容不同的浏览器版本。比如,`-moz-pre-wrap` 是为了Firefox,而`-o-pre-wrap` 是...

    CSS3新特性1

    例如,`box-sizing`在Firefox中需要`-moz-box-sizing`,而`column-count`在IE10+和Opera才支持。 综上所述,CSS3的新特性极大地扩展了Web设计的可能性,让网页更加美观、交互性更强。开发者应根据项目需求和目标...

    pre标签的css代码,防止代码pre中代码过长等问题

    important`:为老版本的 Firefox 添加支持,`!important` 确保此设置优先级高于其他样式。 3. `white-space: -pre-wrap` 和 `white-space: -o-pre-wrap`:分别用于更早版本的 Opera 浏览器,确保兼容性。 4. `word-...

    让pre标签自动换行示例代码

    - `word-wrap: break-word;`(在某些版本的 IE 中是 `word-wrap`,在现代浏览器中是 `overflow-wrap`):允许单词在必要时断开,以防止内容溢出其容器。这对于处理非常长的无空格字符串尤其有用。 结合上述属性,...

    CSS种针对浏览器兼容问题的解决方法

    IE 支持 `word-wrap: break-word` 来实现自动换行,而 Firefox 则需要使用其他属性或方法来达到相同的效果。 以上列举了CSS中常见的浏览器兼容性问题及解决方法。开发者在进行前端开发时,需要时刻关注这些差异,并...

    html pre标签使文本自动换行

    这段 CSS 代码确保了在主流浏览器(包括 IE6、IE7、IE8、Firefox、Opera、Safari 和 Chrome)中,`&lt;pre&gt;` 标签内的文本能够正确地自动换行,同时保持原有的格式。`word-wrap: break-word;` 属性允许单词在必要时进行...

    从textarea中获取数据之后按原样显示实现代码

    `和`word-wrap: break-word;`确保文本在容器边缘处能够换行,而不是全部显示在一行内。 具体实现步骤如下: 步骤1:使用`&lt;pre&gt;`标签包裹输出的变量。在JSP页面中,可以使用EL表达式(例如`从数据库显示的字段%&gt;`)...

    浏览器兼容问题

    ` 在 IE6-7 和 Opera 中被支持,但在 Safari 和 Firefox 中不支持。 **解决方案**:使用 `cursor: pointer;` 替代。 ```css .link { cursor: pointer; } ``` **解释**:`cursor: pointer;` 是跨浏览器支持的手型...

    css hack div 布局

    而在Firefox中,由于它默认支持文本自动换行,所以通常不需要额外的CSS hack。但如果需要通过JavaScript来实现,可以使用以下脚本: ```html function toBreakWord(intLen, id) { var obj = document....

    前端处理浏览器兼容问题

    **解决方法**:设置`&lt;td&gt;`的`word-wrap`属性为`break-word`或`white-space`属性为`nowrap`。 ```css td { word-wrap: break-word; /* 或者 white-space: nowrap; */ } ``` 以上列举了一系列常见的浏览器兼容性...

Global site tag (gtag.js) - Google Analytics