<!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. onethink和phpwind共享

    将onethink和phpwind数据库安装在一起.使用公用表前缀. 将onethink的member表点phpwind有user表 这是onethink在根文件夹的安装,phpwind安装在bbs的 ...

  2. Vijos.1096 津津储蓄计划

    见问题: https://vijos.org/p/1096 主题概述 津津的零花钱一直都是自己的管理.每月初的母亲津津300美元,津津将于本月支出预算.而且总是做同样的实际支出与预算.  为了让津津学 ...

  3. 基于GeoHash算法的附近点搜索实现（一）

    1. 引入 最近在参加学校的计算机仿真大赛,时间好像有点不够,所以只完成了前面的一部分最基础的功能,中途还是选择了放弃.但是之前的部分的确觉得完成得还不错,在这里分享一下.题目是要完成一个宇宙飞船加油 ...

  4. 备忘录模式设计模式入门Memento

    //备忘录模式定义: //在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态. //这样以后就能够将该对象恢复到原先保存的状态 //实例:測试两种方案.两种方案在第一阶段的过程 ...

  5. UVA1232 - SKYLINE(段树部分的变化)

    UVA1232 - SKYLINE(线段树区间改动) 题目链接 题目大意:依照顺序盖楼.假设这个位置(当前要盖的楼覆盖范围内)要新建的楼的高度>=之前就有的最大高度,那么就+1.最后输出这个+1 ...

  6. Visual studio 2013 bug:visual studio no editoroptiondefinition export found for the given option nam

    昨天VS 2013打开项目,双击cs当文件,下面出现bug. Google没有理由.最后,在刚刚好清理C磁盘缓存用户文件夹. 然后就OK了. 详细的路径是:C:\Users\{当前用户}\AppDat ...

  7. 应用程序框架实战十三:DDD分层架构之我见（转）

    前面介绍了应用程序框架的一个重要组成部分——公共操作类,并提供了一个数据类型转换公共操作类作为示例进行演示.下面准备介绍应用程序框架的另一个重要组成部分,即体系架构支持.你不一定要使用DDD这样的架构 ...

  8. VC中MessageBox的常见用法

    一.关于MessageBox       消息框是个很常用的控件,属性比较多,本文列出了它的一些常用方法,及指出了它的一些应用场合.       1.MessageBox("这是一个最简单的 ...

  9. Windows移动开发（一）——登堂入室

    開始本博客之前先分享一个自己的好消息吧,2014年3月31日起,正式就职于北京****集团Win8project师.主要负责将IOS和Android应用移植到Win8.1平板上,目标客户是银行,闲话不 ...

  10. csdn 博客,你很努力,有人帮你-2015年03一个月17日本

    今天泛化 开始使用简书 正则表达式的博客写了两篇文章 回顾 Core Data 基本使用 总结 Xcode6新特性 简单聊聊 简书,事实上一開始学 MarkDown 语法的时候,已经用了,但是,一直认 ...