Automatic line feed solution for continuous characters

The text layout has some format requirements based on different languages. For example, punctuation marks such as commas and semicolons in simplified Chinese won't appear at the beginning of a line. For English, it is a complete word.
In the two lines, the browser displays the text based on the principle similar to this. However, due to the limited width of the webpage, consecutive ultra-long letters, numbers, or punctuation characters that exceed the limit of the width of the area, the page is affected.
Area view, as shown in Example 1. This problem is particularly prominent when the user input information is displayed. Here is how to solve this problem.

In the draft CSS3, two new attributes of word-wrap and word-break are added for text processing to solve this problem:

1. {Word-wrap: break-word ;}
2. {Word-break: break-all;}: The content will wrap in the boundary. If necessary, the line feed (word-break) will also happen.

The following are common browser support information:

	IE6/7 [1]	Firefox2/3 [2]	Opera3 +	Safari9.5 +/Chrome
{Word-wrap: break-word ;}	The width of the td element must be set. See examples 4 and 5.	Not Supported	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	Not Supported	Supported

• [1] In CSS Compatibility and Internet Explorer of MSDN, IE8 supports the word-wrap and word-break attributes like IE6 and IE7, however, I tested IE8beta2 but it does not support these two items. Since IE8 is still in beta stage and I believe IE8 will eventually support it, I declare it in the header of the page.<meta content="IE=7" http-equiv="X-UA-Compatible" />It is a good way to make IE8 interpret the page according to ie7.
• [2] Firefox3.1 will support the word-wrap attribute

{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.

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; character (of course, you can also use<wbr />And & shy;, see The wbr tag of ppk for The support of these three characters in The browser. These characters are not displayed in The browser, but long strings are wrapped in line. 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 (/^ \ 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 ('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 specific applications, see the demo instance.

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.	The words in this word are not inserted into \ u8203, and there are not many words with more than 13 letters in the impression. This ensures that most words are not broken.
Re	Regular Expression, default [a-zA-Z0-9]	Regular Expression of a word, used to determine the character composition of a word, note \ 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

The core part of this function is modified from Hedger Wang to organize a JavaScript solution "Cross Browser Word Breaker", which uses document. createTreeWalker and
The split method adds & #8203; to each character of a non-IE browser, which is used in plain Chinese text. However, if you carefully observe the examples provided, you will find that
When there are English or numbers in the text, although the line break problem is solved, it makes the text difficult to read and increases the spacing between characters, so I made the above improvements on this basis.