zoukankan      html  css  js  c++  java
  • JS解决所有浏览器连续输入英文字母不换行问题,包括火狐(转)

    问题描述:

    <p style="font-size:12px;line-height:30px;">测试数据测试数据</p>

    p标签内如果输入一长段英文字符,像这样

    <p style="font-size:12px;line-height:30px;">asfjhasklfjaklsfjalsjflkasjfaslkfjalskfjklashfkoasljflkwqjlafsasfasffkajslkfjaslkfjalksjflaksjfklasjfkjasfakshfkajshfasfasfasfasfwafasfa</p>

    那么就会出现浏览器不会自动换行的问题。

    网上找到了一个word-break的css属性,将其值置为break-all;测试OK!但悲剧的发现FF还是不兼容,但如果把p标签换成textarea标签就可行。

    木有办法,只有用JS判断浏览器内核,然后对于FF内核输出不同内容,代码如下:

    <script type="text/javascript">
    if(navigator.userAgent.indexOf("Firefox")>0){
    document.write( '<textarea style="font-size:12px;line-height:30px;word-break:break-all;overflow:auto;" readonly="readonly"><?php echo $zow['contents'];?></textarea>'); 
    }else{
    document.write('<p style="font-size:12px;line-height:30px;word-break:break-all;overflow:auto;"><?php echo $zow["contents"];?></p>');
    }
    </script>

    OK!大功告成,对于FF就会以textarea来显示内容,这样连续英文字符也不会出现不换行的效果。目前想到的比较好的兼容方案,如有高手见此鄙文,还请给出更好的兼容方案。

  • 相关阅读:
    gotour源码阅读
    CPU知识
    GCC知识
    go/src/make.bash阅读
    Go的pprof使用
    CGI的一些知识点
    STM32——C语言数据类型
    css 学习资料
    项目管理实践教程
    js 格式验证总结
  • 原文地址:https://www.cnblogs.com/lguow/p/11213802.html
Copyright © 2011-2022 走看看