Solution to Firefox's English letters without wrapping lines

The layout of text will have some format requirements depending on the language. For example, punctuation marks such as commas and semicolons in simplified Chinese will not appear at the beginning of a line. For English, a complete word will not be displayed on two lines. The browser will display the text based on principles like this. However, because the web page has width limitations, continuous and long letters, numbers or punctuation marks exceed the limit of the width of the area where it is located, which affects the page vision, as shown in Example 1. This problem is particularly prominent when displaying user input information. Here we are talking about how to solve this problem.

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

1. {word-wrap:break-word;} : According to text rules for Asian and non-Asian languages, line wraps are allowed within characters, and any characters in non-Asian language text lines are allowed to be broken within arbitrary characters.
2. {word-break:break-all;} : The content will be broken within the boundary, if necessary, the word-break will also happen.

The following are the support situations of common browsers:

• [1] In MSDN's CSS Compatibility and Internet Explorer, it can be seen that IE8 will support both word-wrap and word-break like IE6 and IE7, but I did not support these two items after testing on IE8beta2. Since IE8 is still in the beta stage and I believe IE8 will eventually support it, it is a good way to declare <meta content="IE=7" http-equiv="X-UA-Compatible" /> at the header to make IE8 interpret the page according to IE7.
• [2] Firefox 3.1 will support word-wrap attribute

Since {word-break:break-all;} causes severe readability of English and numericals and fails to wrap consecutive symbols, {word-wrap:break-word;} is a relatively good choice.

However, in the face of such poor support from the browser, we cannot solve this problem without using JavaScript. That is, when the browser does not support the CSS solution, insert the "8203" characters in the appropriate position of the continuous string (of course you can also use <wbr /> and "shy;. For the support of these three characters in the browser, please see ppk's "The wbr tag"). These characters will not be displayed in the browser, but will cause long strings to be wrapped. 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){
 // Modify 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/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'),
 //re = /([a-zA-Z0-9]{0,13})/;
 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, please see the demo example

The fnWordBreakAll function provides some customized parameters, and the usage methods and parameters are as follows:

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

The core part of this function was modified from Hedger Wang. A JavaScript solution "Cross Browser Word Breaker" was compiled. It uses document.createTreeWalker and split methods to add "#8203" to each character in non-IE browsers. It is basically no problem when it is used in pure Chinese text, but if you observe the examples he gives, you will find that when there are English or numbers in the text, although it solves the line break problem, it makes the text difficult to read and increases the spacing between characters, so I made the above improvements based on this.