<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>字母数字的换行问题</title>

<style>

p{ width:300px; border:1px solid #000;word-wrap: break-word}

</style>

<script language="javascript">

   //aka makeDesignerHappy(dEl);

      function breakWord(dEl){

        if(!dEl || dEl.nodeType !== 1){

          return false;

        } else if(dEl.currentStyle && typeof dEl.currentStyle.wordBreak === 'string'){

          //Lazy Function Definition Pattern, Peter's Blog

          //From http://peter.michaux.ca/article/3556

          breakWord = function(dEl){

            //For Internet Explorer

            dEl.runtimeStyle.wordBreak = 'break-all';

            return true;

          }

          return breakWord(dEl);

        }else if(document.createTreeWalker){

          //Faster Trim in Javascript, Flagrant Badassery

          //http://blog.stevenlevithan.com/archives/faster-trim-javascript

          var trim = function  (str) {

            str = str.replace(/^\s\s*/, '');

            var ws = /\s/,

            i = str.length;

            while (ws.test(str.charAt(--i)));

            return str.slice(0, i + 1);

          }

          //Lazy Function Definition Pattern, Peter's Blog

          //From http://peter.michaux.ca/article/3556

          breakWord = function(dEl){

            //For Opera, Safari, and Firefox

            var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null, false);

            var node,s,c = String.fromCharCode('8203');

            while (dWalker.nextNode())

            {

              node = dWalker.currentNode;

              //we need to trim String otherwise Firefox will display

              //incorect text-indent with space characters

              s = trim( node.nodeValue ) .split('').join(c);

              node.nodeValue = s;

            }

            return true;

          }

          return breakWord(dEl);

        }else{

          return false;

        }

      }

</script>

</head>

<body>

<plass="break-ord">

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

</p>

      <script language="javascript">

      //Break All Words

      void function(){

        var aEl = document.getElementsByTagName('p');

        var dEl,i;

        var sName = "break-word";

        var oReg =  new RegExp('(\\s|^)' + sName + '(\\s|$)');

        for(i=0;dEl = aEl[i];i++){

          if(dEl.className.match(oReg)){

            breakWord(dEl);

          }

        }

      }();

</script>

</body>

</html>

js 实现自动换行的更多相关文章

  1. 【 D3.js 高级系列 — 1.1 】 封装文本自动换行

    在[高级 - 第 1.0 章]中讲解了在 SVG 中如何配合使用 text 和 tspan 来实现换行的功能,本文对此功能进行一下封装,以后就可以直接用了. 1. 引用 js 文件 下载地址:mult ...

  2. d3.js封装文本实现自动换行和旋转平移等功能

    我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧. 一.引用 multext.js 文件 multext.js function appendMulti ...

  3. js在（FF）中长字段溢出（自动换行）

    function toBreakWord(el,intLen){    var obj=document.getElementByIdx_x(el);     var strContent=obj.i ...

  4. JS/CSS收藏

    jQuery radio取值,checkbox取值,select取值 var url += '&beginTime=' + encodeURIComponent(beginTime) if ( ...

  5. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  6. WebView加载HTML图片大小自适应与文章自动换行

    http://www.brighttj.com/ios/ios-webview-load-html-image-adaptive.html 在很多App中都会使用到webview,尤其是在加载新闻内容 ...

  7. H5 canvas填充文字自动换行

    canvas是H5中非常重要,非常常用,也是非常强大的一个新标签,美中不足的事,canvas中没没有自动换行的属性,我的第一反应是,字符串截取,然后计算每行的距离来实现自动换行.. 然后百度了一下,已 ...

  8. JS魔法堂：再识ASCII实体、符号实体和字符实体

    一.前言            相信大家都熟悉通过字符实体   来实现多个连续空格的输入吧!本文打算对三类HTML实体及JS相关操作作进一步的整理和小结,若有纰漏请大家指正,谢谢. 二.初识HTML实 ...

  9. 【iOS】WebView加载HTML图片大小自适应与文章自动换行

    在很多App中都会使用到webview,尤其是在加载新闻内容等文章形式的数据时.因为图文混编以及不同字体格式的显示,在iOS进行编辑 和显示都是一大问题(当然,iOS中也可以用CoreText进行绘制 ...

随机推荐

  1. atitit.无线上网卡 无法搜索WiFi 解决无线路由器信号不能被连接

    atitit.无线上网卡 无法搜索WiFi 解决无线路由器信号不能被连接 #---现象 pc机无线网卡无法搜索到无线路由器的信号.. 但是,笔记本电脑和手机能够... 只要pc机无线网卡可以搜索信号, ...

  2. 【Java编码准则】の ＃02不要在client存储未加密的敏感信息

    当构建CS模式的应用程序时,在client側存储敏感信息(比如用户私要信息)可能导致非授权的信息泄漏. 对于Web应用程序来说,最常见的泄漏问题是在client使用cookies存放server端获取 ...

  3. [6] 算法路 - 双向冒泡排序的Shaker

    Shaker序列 –算法 1. 气泡排序的双向进行,先让气泡排序由左向右进行.再来让气泡排序由右往左进行,如此完毕一次排序的动作 2. 使用left与right两个旗标来记录左右两端已排序的元素位置. ...

  4. 霸气侧漏HTML5--之--canvas(1) api + 弹球例子

    html5也许最有吸引力的新功能是canvas 漆.基本可以足够强大后,以取代flash页面的效果.下面来介绍canvas要使用: HTML5 Canvas的基本图形都是以路径为基础的.通常使用Con ...

  5. HDU 1712 ACboy needs your help(包背包)

    HDU 1712 ACboy needs your help(包背包) pid=1712">http://acm.hdu.edu.cn/showproblem.php? pid=171 ...

  6. Parse 和 Swift 搭建一个像 Instagram

    如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用?   [编者按]本篇文章作者是Reinder de Vries,既是一名企业家,也是优秀的程序员,发表多篇应用程序的博客 ...

  7. Android ADT Bundle（Eclipse with ADT） ADT R23

    ADT Bundle Platform Package Size MD5 Checksum Windows 32-bit adt-bundle-windows-x86-20140624.zip 377 ...

  8. unity3d 学习笔记_____Native2d 刚体、冲击、联合使用

    Mass Mass of the rigidbody. Linear Drag Drag coefficient affecting positional movement. Angular Drag ...

  9. Java数据结构与算法(21) - ch09红黑树(RB树)

    红-黑规则1. 每一个节点不是红色的就是黑色的2. 根总是黑色的3. 如果节点是红色的,则它的子节点必须是黑色的:如果节点是黑色的,其子节点不是必须为红色.4. 从根到叶节点或空子节点的每条路径,必须 ...

  10. xcode于Archive当产生安装包遇到ld: library not found for -lPods

    此问题是由能力很困扰,通常有以下几个方案 进target的 Build Phases- Link binary Library.到场libPods.a,假设是红.删,能够 其他解决方案 Build S ...