Solutions for css continuous character wrap (word-wrap and word-break)

The following are common browser support information:

Surface is the support of common browsers:

	IE6/7/8[1]	Firefox2/3[2]	Firefox3.5	Opera9 +	Safari9.5 +/Chrome
{Word-wrap: break-word ;}	The width of the td element must be set. See examples 4 and 5.	Not supported	The td element is not supported. See examples 4 and 5.	Not supported	The td element is not supported. See examples 4 and 5.
{Word-break: break-all ;}	Continuous symbols are not supported. See Example 3.	Not supported	Continuous symbols are not supported. See Example 3.	Not supported	Supported

{Word-break: break-all;} causes serious reduction in the readability of English and numbers, and cannot wrap continuous symbols. Therefore, {word-wrap: break-word ;} is a relatively good choice. Note that word-wrap in various browsers is inconsistent on td, so avoid using it directly on td.

However, in the face of poor browser support, JavaScript cannot be used to solve this problem, that is, when the browser does not support the CSS solution, insert the appropriate position of the continuous string & #8203; (Of course, you can also use <wbr/> and & shy;. For The support of these three characters in The browser, see The "The wbr tag" of ppk.), these characters are not displayed in the browser, but long string line breaks. & #8203; and & shy; both cause a large number of non-printable characters in the copied text, resulting in a sharp increase in the number of characters, more seriously, the copied link string is unavailable. Therefore, <wbr/> is a good solution. Although <wbr/> is not supported in IE8 and has bugs in Safari, however, these browsers can directly use CSS {word-wrap: break-word} to Implement <wbr/> processing. To be compatible with <wbr/> In Opera, set CSS: wbr: after {content: "0200B "}.

Override the implementation method

The specific implementation code is as follows:

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 <iLen; ++ I ){
If (re. test (aAllEls [I]. className )){
AEls [aEls. length] = aAllEls [I];
      }
    }
Return aEls;
}) () | [],
FnBreakWord = function (oEl ){
// Modified based on http://www.hedgerwow.com/360/dhtml/css-word-break.html
If (! OEl | oEl. nodeType! = 1 ){
Return false;
} Else if (oEl. currentStyle & 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 (/^ ss */,'');
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 ('20140901 '),
// Re =/([a-zA-Z0-9 })/;
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 <n; ++ I ){
Var sUa = navigator. userAgent,
STn = aEls [I]. tagName. toLowerCase ();
If (/Opera/). test (sUa) | (/Firefox/). test (sUa) | (/KHTML/). test (sUa )&&
(STn = 'TD '| sTn = 'th') | bAll ){
FnBreakWord (aEls [I]);
  }
}
}

For more information, see

The fnWordBreakAll function provides the following custom parameters:

FnWordBreakAll ({word: 15, re: '[\ w]', all: true });

Parameters	Value	Description
Word	Positive integer. The default value is 13.	U8203 is not inserted into words within this word, and there are not many words with more than 13 letters in the impression. This ensures that most words will not be broken.
Re	Regular expression, default [a-zA-Z0-9]	Regular expression of a word, used to determine the character composition of a word, note the escape
All	Boolean value. The default value is false.	Determine whether to execute in all browsers. It is mainly used in Opera and Firefox by default, and when the class application is executed on th or td Safari. when word-break-all is not defined, the style is added to IE.
ClassName	Valid class name. The default value is word-break-all.	Attribute name corresponding to the element of the execution function