<!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. [Unity3D]Unity3D游戏开发3D选择场景中的对象，并显示轮廓效果强化版

    大家好,我是秦培,欢迎关注我的博客,我的博客地址blog.csdn.net/qinyuanpei. 在上一篇文章中,我们通过自己定义着色器实现了一个简单的在3D游戏中选取.显示物体轮廓的实例. 在文章 ...

  2. Java高效读取大文件（转）

    1.概述 本教程将演示如何用Java高效地读取大文件.这篇文章是Baeldung(http://www.baeldung.com/) 上“Java——回归基础”系列教程的一部分. 2.在内存中读取 读 ...

  3. Git协作流程（转）

    Git 作为一个源码管理系统,不可避免涉及到多人协作. 协作必须有一个规范的流程,让大家有效地合作,使得项目井井有条地发展下去."协作流程"在英语里,叫做"workflo ...

  4. android获取ip和本机的物理地址

    <span style="font-size:18px;">/** * 获取ip * * @return */ public static String getLoca ...

  5. java数据结构系列——排列（2）：有序阵列

    package Array; /** * 对数组排序.当添加到阵列保持有序数组元素: * @author wl * */ public class MyOrderArray { private lon ...

  6. springmvc+ztree v3实现类似表单回显功能

    在做权限管理系统时,可能会用到插件zTree v3,这是一个功能丰富强大的前端插件,应用很广泛,如异步加载菜单制作.下拉选择.权限分配等.在集成SpringMVC中,我分别实现了zTree的添删改查, ...

  7. HDU 2841 Visible Trees（数论）

    标题效果:给你个m*n方格,广场格从(1,1)开始. 在树中的每个点,然后让你(0,0)点往下看,问:你能看到几棵树. 解题思路:假设你的视线被后面的树和挡住的话以后在这条线上的树你是都看不见的啊.挡 ...

  8. 至尊快速，国产语言RPP 1.83强势来袭

    以下是 R++的性能測试数据:(奔腾 1.86GHZ,測试 3 次取平均值) 执行效率: R++的内部结构和 C++大致同样,所以理论上 R++能够达到和 C++一样的执行速度,眼下 R++已开启汇编 ...

  9. 抄360于Launcher浮动窗口的屏幕显示内存使用情况(改进版)

    MainActivity例如下列: package cc.cc; import android.os.Bundle; import android.view.View; import android. ...

  10. 通讯录C++console application

    #include<iostream> #include<fstream> #include<string> #include<cstring> #inc ...