<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>随网之舞break-all</title>
	<atom:link href="http://dancewithnet.com/tag/break-all/feed/" rel="self" type="application/rss+xml" />
	<link>http://dancewithnet.com</link>
	<description>WEB Design{HTML:CSS:Javascript:DOM:AJAX:PHP:Usability}/Viewpoint/Photo/Food/Mood</description>
	<lastBuildDate>Mon, 18 Jul 2011 02:45:29 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>连续字符自动换行的解决方案</title>
		<link>http://dancewithnet.com/2008/12/04/word-break-all/</link>
		<comments>http://dancewithnet.com/2008/12/04/word-break-all/#comments</comments>
		<pubDate>Wed, 03 Dec 2008 16:16:50 +0000</pubDate>
		<dc:creator>秦歌</dc:creator>
				<category><![CDATA[HTML & CSS]]></category>
		<category><![CDATA[Javascript & DOM & AJAX]]></category>
		<category><![CDATA[break-all]]></category>
		<category><![CDATA[break-word]]></category>
		<category><![CDATA[createTreeWalker]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[word-break]]></category>
		<category><![CDATA[word-wrap]]></category>
		<category><![CDATA[跨浏览器]]></category>

		<guid isPermaLink="false">http://dancewithnet.com/?p=1386</guid>
		<description><![CDATA[文本的排版依据语言的不同会有一些格式上的要求，比如简体中文中类似逗号、分号等标点符号不会出现在一行的开头，对于英文来讲就是一个完整单词不会在两行显示，浏览器会依据类似这... ]]></description>
			<content:encoded><![CDATA[<p>文本的排版依据语言的不同会有一些格式上的要求，比如简体中文中类似逗号、分号等标点符号不会出现在一行的开头，对于英文来讲就是一个完整单词不会在两行显示，浏览器会依据类似这样的原则来显示文本。但是由于网页有宽度限制的，连续的超长的字母、数字或标点符号超出其所在区域宽度的限制而导致影响页面视觉，如<a href="http://dancewithnet.com/lab/2008/word-break-all/#demo1">例1</a>所示。这个问题在显示用户输入信息时尤为突出，这里就是要说如何解决这个问题。</p>
<p>在<a href="http://www.w3.org/TR/css3-text/">CSS3草案</a>中，对文本的处理新增了两个新属性<a href="http://www.w3.org/TR/css3-text/#word-wrap">word-wrap</a>和<a href="http://www.w3.org/TR/css3-text/#word-break">word-break</a>来解决这个问题：</p>
<ol>
<li>{word-break:break-all;} ：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行，且允许非亚洲语言文本行的任意字内断开</li>
<li> {word-wrap:break-word;}： 内容将在边界内换行，如需要则词内换行（word-break）也行发生</li>
</ol>
<p><span id="more-1386"></span></p>
<p>下面是常见浏览器的支持情况：</p>
<table>
<tbody>
<tr>
<th></th>
<th>IE6/7/8<sup>[1]</sup></th>
<th>Firefox2/3<sup>[2]</sup></th>
<th>Firefox3.5</th>
<th>Opera9+</th>
<th>Safari9.5+/Chrome</th>
</tr>
<tr>
<th>{word-wrap:break-word;}</th>
<td>td元素需设置其宽度<br />见<a href="http://dancewithnet.com/lab/2008/word-break-all/#demo4">例4</a>和<a href="http://dancewithnet.com/lab/2008/word-break-all/#demo5">例5</a></td>
<td>不支持</td>
<td>不支持td元素<br />见<a href="http://dancewithnet.com/lab/2008/word-break-all/#demo4">例4</a>和<a href="http://dancewithnet.com/lab/2008/word-break-all/#demo5">例5</a></td>
<td>不支持</td>
<td>不支持td元素<br />见<a href="http://dancewithnet.com/lab/2008/word-break-all/#demo4">例4</a>和<a href="http://dancewithnet.com/lab/2008/word-break-all/#demo5">例5</a></td>
</tr>
<tr>
<th>{word-break:break-all;}</th>
<td>不支持连续的符号<br />见<a href="http://dancewithnet.com/lab/2008/word-break-all/#demo3">例3</a></td>
<td>不支持</td>
<td>不支持连续的符号<br />见<a href="http://dancewithnet.com/lab/2008/word-break-all/#demo3">例3</a></td>
<td>不支持</td>
<td>支持</td>
</tr>
</tbody>
</table>
<ul class="refer">
<li>[1] <del datetime="2009-05-13T17:07:03+08:00">在MSDN的<a href="http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#font">CSS Compatibility and Internet Explorer</a>中可以看出，IE8会像IE6和IE7一样支持word-wrap和word-break这两个属性，但我在IE8beta2上测试来看却不支持这两项，由于IE8还处于beta阶段，且我相信IE8最终会支持的，所以在页头声明<code>&lt;meta content="IE=7" http-equiv="X-UA-Compatible" /&gt;</code>使IE8按照IE7来解释页面是一个不错的办法。</del><ins datetime="2009-05-13T21:08:52+08:00"><a href="http://msdn.microsoft.com/en-us/library/ms531186.aspx">IE8正式版支持</a></ins></li>
<li>[2] <del datetime="2009-05-13T17:07:03+08:00">Firefox3.1将会支持word-wrap属性</del><ins datetime="2009-05-13T17:07:03+08:00">Firefox3.5beta4已经支持</ins></li>
</ul>
<p>由于{word-break:break-all;}导致英文和数字可读性严重下降且无法使连续符号换行，所以{word-wrap:break-word;}是一个相对较好的选择。需要注意的是各个浏览器中word-wrap在td上实现不一致，所以避免直接在td上使用。</p>
<p>但面对浏览器的如此糟糕支持，所以不能不借助JavaScript来解决这个问题，即当浏览器不支持CSS解决方案时，在连续字符串的适当位置插入&amp;#8203;字符（当然还可以用<code>&lt;wbr /&gt;</code>和&amp;shy;，这三个字符在浏览器中的支持情况请看<a href="http://www.quirksmode.org/oddsandends/wbr.html">ppk的《The wbr tag》</a>），这些字符写在浏览器中不会显示，却使长字符串换行。<ins datetime="2009-05-30T15:47:29+08:00">&amp;#8203;和&amp;shy;都会导致复制用其处理过的文本时有大量不可打印的字符，导致字符数急剧增大，更严重的是导致复制的链接字符串不可用，所以用<code>&lt;wbr /&gt;</code>是比较好的方案，虽然<code>&lt;wbr /&gt;</code>在IE8中不被支持且在Safari中有bug，但这些浏览器可以直接用CSS{word-wrap:break-word}来实现无需用<code>&lt;wbr /&gt;</code>处理。</ins><ins datetime="2009-06-04T22:46:16+08:00">Opera下要兼容<code>&lt;wbr /&gt;</code>，需要设置CSS：<code>wbr:after { content: "\00200B" }</code></ins>。
</p>
<p><ins datetime="2009-05-28T18:02:06+08:00">2009.05.28重写了实现方法，尽可能减少对浏览器探测的依赖，同时考虑对同一个页面多次执行该方法的效率，同时为了偷懒直接基于YUI。<a href="http://dancewithnet.com/lab/2008/word-break-all/break-word-req-yui.html" class="link-btn">请看DEMO</a></ins></p>
<p>具体实现代码如下：</p>
<pre><code>function fnBreakWordAll(o){
var o = o || {},
  iWord = o.word || 13,
  iRe = o.re || '[a-zA-Z0-9]',
  bAll = o.all || false,
  sClassName = o.className || 'word-break-all',
  aEls = o.els || (function(){
    var aEls = [],
      aAllEls = document.getElementsByTagName('*'),
      re = new RegExp('(?:^|\\s+)' + sClassName + '(?:\\s+|$)');
    for(var i =0,iLen = aAllEls.length; i &lt; iLen ; ++i){
      if(re.test(aAllEls[i].className)){
        aEls[aEls.length] = aAllEls[i];
      }
    }
    return aEls;
  })() || [],
  fnBreakWord = function(oEl){
    <span>// 基于http://www.hedgerwow.com/360/dhtml/css-word-break.html修改</span>
    if(!oEl || oEl.nodeType !== 1){
      return false;
    }else if(oEl.currentStyle &#038;&#038; typeof oEl.currentStyle.wordWrap==='string'){
      breakWord = function(oEl){
        oEl.runtimeStyle.wordWrap = 'break-word';
        return true;
      }
      return breakWord(oEl);
    }else if(document.createTreeWalker){
      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);
      }
      breakWord = function(oEl){
        var dWalker=document.createTreeWalker(oEl,NodeFilter.SHOW_TEXT,null,false);
        var node,s,c = String.fromCharCode('8203'),
          <span>//re = /([a-zA-Z0-9]{0,13})/;</span>
          re = new RegExp('('+ iRe +'{0,' + iWord + '})');
        while (dWalker.nextNode()){
          node = dWalker.currentNode;
          s = trim(node.nodeValue).split(re).join(c);
          node.nodeValue = s;
        }
        return true;
      }
      return breakWord(oEl);
    }
  };
for(var i=0,n=aEls.length; i&lt;n; ++i){
  var sUa = navigator.userAgent,
    sTn = aEls[i].tagName.toLowerCase() ;
  if((/Opera/).test(sUa) || (/Firefox/).test(sUa) || ((/KHTML/).test(sUa) &#038;&#038;
  (sTn === 'td' || sTn === 'th')) || bAll){
    fnBreakWord(aEls[i]);
  }
}
}</code></pre>
<p>具体应用请看<a href="http://dancewithnet.com/lab/2008/word-break-all/kill-all.html" class="link-btn">演示实例</a></p>
<p>fnWordBreakAll函数提供一些定制参数，使用方法和参数含义如下：</p>
<pre><code>fnWordBreakAll({word:15,re:'[\\w]',all:true});</code></pre>
<table>
<tr>
<th>参数</th>
<th>值</th>
<th>说明</th>
</tr>
<tr>
<th>word</th>
<td>正整数，默认是13</td>
<td>在这个字数内的单词不会被插入\u8203，印象中超过13个字母的单词不多，这可以保证绝大部分单词不会被打碎</td>
</tr>
<tr>
<th>re</th>
<td>正则表达式，默认[a-zA-Z0-9]</td>
<td>单词的正则表达式，用以确定一个单词是哪些字符组成，注意\的转义</td>
</tr>
<tr>
<th>all</th>
<td>布尔值，默认false</td>
<td>确定是否在所有的浏览器中执行，默认在Opera和Firefox，以及当class应用在th或td的Safari上执行，这个主要用在.word-break-all没有定义时，会对IE加上样式</td>
</tr>
<tr>
<th>className</th>
<td>合法class名，默认word-break-all</td>
<td>执行函数的元素对应属性名</td>
</tr>
</table>
<p>这个函数的核心部分修改自Hedger Wang 整理了一个JavaScript解决方案<a href="http://www.hedgerwow.com/360/dhtml/css-word-break.html">《Cross Browser Word Breaker》</a>，其利用<a href="https://developer.mozilla.org/En/DOM/Document.createTreeWalker">document.createTreeWalker</a>和split方法给非IE浏览器的每个字符间加入了&amp;#8203;，它用在纯中文文本基本上没有什么问题，但是如果你仔细观察他给出的例子就会发现文本中有英文或数字时，虽然解决了换行问题，但是使文本难以阅读，且增大了字符间的间距，所以我在此基础上做了上面的改进。</p>
]]></content:encoded>
			<wfw:commentRss>http://dancewithnet.com/2008/12/04/word-break-all/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
	</channel>
</rss>

