Solution to the problem of English letters not wrapping in Firefox

The layout of text has some formatting requirements depending on the language. For example, in simplified Chinese, punctuation marks such as commas and semicolons 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 text based on similar principles. However, due to the width limitation of web pages, continuous extra-long letters, numbers or punctuation marks exceed the width limit of the area where they are located, thus affecting the visual effect of the page, as shown in Example 1. This problem is particularly prominent when displaying user input information, and here we will talk about how to solve this problem.

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

1. {word-wrap:break-word;} : allows line breaks within words, in accordance with the text rules of Asian and non-Asian languages, and allows non-Asian language text lines to be broken within any word
2. {word-break:break-all;} : The content will wrap within the boundary, and word-breaks will also occur if necessary.

The following are the common browser support:

• [1] From MSDN's CSS Compatibility and Internet Explorer, we can see that IE8 supports the word-wrap and word-break properties just like IE6 and IE7. However, when I tested IE8beta2, I found that it does not support these two properties. Since IE8 is still in the beta stage and I believe IE8 will eventually support them, it is a good idea to declare <meta content="IE=7" http-equiv="X-UA-Compatible" /> in the page header to make IE8 interpret the page according to IE7.
• [2] Firefox 3.1 will support the word-wrap attribute

Since {word-break:break-all;} seriously reduces the readability of English and numbers and fails to wrap consecutive symbols, {word-wrap:break-word;} is a relatively good choice.

But faced with such poor browser support, we have to resort to JavaScript to solve this problem, that is, when the browser does not support the CSS solution, insert ​ characters at the appropriate position of the continuous string (of course, you can also use <wbr /> and ­, for the support of these three characters in browsers, please see ppk's "The wbr tag"). These characters will not be displayed when written in the browser, but will make the long string wrap. 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){
 // 基于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]);
 }
 }
 }

Please see the demonstration example for specific application

The fnWordBreakAll function provides some custom parameters. The usage and parameter meanings are as follows:

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

The core part of this function is modified from Hedger Wang's JavaScript solution "Cross Browser Word Breaker", which uses document.createTreeWalker and split method to add ​ between each character in non-IE browsers. It can be used for pure Chinese text without any problems, but if you look closely at the examples he gave, 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 on this basis.