<!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. 【七】注入框架RoboGuice使用:(Your First Custom Binding)

    上一篇我们简单的介绍了一下RoboGuice的使用([六]注入框架RoboGuice使用:(Singletons And ContextSingletons)),今天我们来看下自己定义绑定(bindi ...

  2. Meld Diff for windows 安装和配置

    Meld Diff for windows 安装和配置 假设你在ubuntu 正在开发中, meld diff 此工具你肯定不会感到陌生. 而且很容易使用. 在网上看 meld for Windows ...

  3. java_访问权限修饰符

    java的访问权限修饰符有四种,根据权限由大到小的顺序为:public,protected,包访问权限(默认,没有修饰符),private. 根据修饰的东西不同,详细介绍如下: 1.修饰类的话分为两种 ...

  4. 用命令行在github新建一个项目

    Github Repository API中说明了可以通过发送一个请求来认证,之后就能通过命令行自动新建远程仓库了. 认证 curl -u 'username' https://api.github. ...

  5. NSIS：禁止选择安装路径和编辑安装目录

    原文 NSIS:禁止选择安装路径和编辑安装目录 如果你想在安装包中禁止用户选择安装路径和编辑安装目录,有两种方式.   第一种:注释或删除安装目录选择页面 1 ;!insertmacro MUI_PA ...

  6. ZOJ 3822 可能性DP

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3822 本场比赛之前,我记得.见WALK概率路DP称号.那么它应该是可以考虑 ...

  7. ubuntu分屏终端

    一:更新source 列表: 将/etc/apt/sources.list的镜像源改为网易源:http://mirrors.163.com/ubuntu/dists/ deb http://mirro ...

  8. Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用

    原文:Eval().XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用 “/vs2005”应用程序中的服务器错误.--------------------------- ...

  9. MySQL Scale Out

    原文:MySQL Scale Out 简介 MySQL复制中较常见的复制架构有“一主一从”.“一主多从”.“双主”.“多级复制”和“多主环形机构”等,见下图: 最常用,也最灵活的就要数“一主多从”复制 ...

  10. 大数据系列修炼-Scala课程03

    前言 今天上班看了很多关于前端js,jQuery.bootstrap.js以及springMVC看得迷迷糊糊的,毕竟以前很少去学习前端的技术,所有看得有点困,还好看得比较多,回家后也开始学习关于Sca ...