Lösung für das Problem, dass englische Buchstaben in Firefox nicht umbrochen werden

Das Layout des Textes unterliegt je nach Sprache einigen Formatierungsanforderungen. Im vereinfachten Chinesisch werden beispielsweise Satzzeichen wie Kommas und Semikolons nicht am Zeilenanfang angezeigt. Im Englischen wird ein vollständiges Wort nicht über zwei Zeilen hinweg angezeigt. Der Browser zeigt Text nach ähnlichen Prinzipien an. Aufgrund der Breitenbeschränkung von Webseiten überschreiten fortlaufende, überlange Buchstaben, Zahlen oder Satzzeichen jedoch die Breitenbeschränkung des Bereichs, in dem sie sich befinden, und beeinträchtigen somit die visuelle Wirkung der Seite, wie in Beispiel 1 gezeigt. Dieses Problem tritt insbesondere dann auf, wenn Benutzereingabeinformationen angezeigt werden. Hier besprechen wir, wie sich das Problem lösen lässt.

Im CSS3-Entwurf werden der Textverarbeitung zwei neue Eigenschaften hinzugefügt, Word-Wrap und Word-Break, um dieses Problem zu lösen:

1. {word-wrap:break-word;} : ermöglicht Zeilenumbrüche innerhalb von Wörtern gemäß den Textregeln asiatischer und nicht-asiatischer Sprachen und ermöglicht den Zeilenumbruch von Textzeilen in nicht-asiatischen Sprachen innerhalb eines beliebigen Wortes.
2. {word-break:break-all;}: Der Inhalt wird innerhalb der Grenzen umbrochen und bei Bedarf werden auch Wortumbrüche vorgenommen.

Die folgenden Browser werden gängig unterstützt:

• [1] Aus der CSS-Kompatibilität von MSDN und Internet Explorer können wir ersehen, dass IE8 die Eigenschaften für Zeilenumbruch und Worttrennung genauso unterstützt wie IE6 und IE7. Als ich jedoch IE8beta2 testete, stellte ich fest, dass es diese beiden Eigenschaften nicht unterstützt. Da sich IE8 noch in der Betaphase befindet und ich davon ausgehe, dass IE8 sie irgendwann unterstützen wird, ist es eine gute Idee, <meta content="IE=7" http-equiv="X-UA-Compatible" /> im Seitenkopf zu deklarieren, damit IE8 die Seite entsprechend IE7 interpretiert.
• [2] Firefox 3.1 wird das Word-Wrap-Attribut unterstützen

Da {word-break:break-all;} die Lesbarkeit von Englisch und Zahlen erheblich reduziert und aufeinanderfolgende Symbole nicht umbricht, ist {word-wrap:break-word;} eine relativ gute Wahl.

Angesichts der schlechten Browserunterstützung müssen wir jedoch auf JavaScript zurückgreifen, um dieses Problem zu lösen. Das heißt, wenn der Browser die CSS-Lösung nicht unterstützt, fügen wir an der entsprechenden Stelle der fortlaufenden Zeichenfolge die Zeichen ​ ein (natürlich können Sie auch <wbr /> und ­ verwenden. Informationen zur Unterstützung dieser drei Zeichen in Browsern finden Sie unter „Das wbr-Tag“ von ppk). Diese Zeichen werden beim Schreiben im Browser nicht angezeigt, führen jedoch zu einem Umbruch der langen Zeichenfolge. Der spezifische Implementierungscode lautet wie folgt:

 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]);
 }
 }
 }

Eine konkrete Anwendung finden Sie im Demonstrationsbeispiel.

Die Funktion fnWordBreakAll bietet einige benutzerdefinierte Parameter. Die Verwendung und Parameterbedeutungen sind wie folgt:

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

Der Kernteil dieser Funktion ist eine Modifikation von Hedger Wangs JavaScript-Lösung „Cross Browser Word Breaker“, die document.createTreeWalker und die Split-Methode verwendet, um in Nicht-IE-Browsern zwischen jedem Zeichen ein ​ einzufügen. Sie kann problemlos für rein chinesischen Text verwendet werden, aber wenn Sie sich die von ihm angeführten Beispiele genau ansehen, werden Sie feststellen, dass, wenn der Text Englisch oder Zahlen enthält, dies zwar das Zeilenumbruchproblem löst, den Text jedoch schwer lesbar macht und den Abstand zwischen den Zeichen vergrößert, weshalb ich die obigen Verbesserungen auf dieser Grundlage vorgenommen habe.