Das Textlayout hat je nach Sprache einige Formatanforderungen. Beispielsweise werden Interpunktionsmarken wie Kommas und Semikolons in vereinfachten Chinesen zu Beginn einer Linie nicht erscheinen. Für Englisch wird ein komplettes Wort nicht in zwei Zeilen angezeigt. Der Browser zeigt den Text basierend auf solchen Prinzipien an. Da die Webseite jedoch Einschränkungen der Breite aufweist, überschreiten kontinuierliche und lange Buchstaben, Zahlen oder Interpunktionsmarken die Grenze der Breite des Bereichs, in dem sie sich befindet, was sich auf die Seitensicht auswirkt, wie in Beispiel 1 gezeigt. Dieses Problem ist besonders hervorragend bei der Anzeige von Benutzereingabeinformationen. Hier sprechen wir darüber, wie man dieses Problem lösen kann.
Im CSS3-Entwurf werden zwei neue Eigenschaften Word-Wrap und Wortausbruch zur Verarbeitung von Text hinzugefügt, um dieses Problem zu lösen:
Im Folgenden finden Sie die Unterstützungssituationen gemeinsamer Browser:
| IE6/7 [1] | Firefox2/3 [2] | Opera3+ | Safari9.5+/Chrom | |
|---|---|---|---|---|
| {WORD-WRAP: BREAK-Wort;} | Die Breite des TD -Elements muss festgelegt werden Siehe Beispiel 4 und Beispiel 5 | Nicht unterstützt | Nicht unterstützt | Nicht unterstützte TD -Elemente Siehe Beispiel 4 und Beispiel 5 |
| {WORD-BREAK: Break-All;} | Kontinuierliche Symbole werden nicht unterstützt Siehe Beispiel 3 | Nicht unterstützt | Nicht unterstützt | Unterstützung |
<meta content="IE=7" http-equiv="X-UA-Compatible" /> am Kopf, um IE8 die Seite nach IE7 zu interpretieren.Da {Word-Break: Break-ALL;} eine schwere Lesbarkeit von Englisch und Numerikalen verursacht und keine aufeinanderfolgenden Symbole einwickelt, ist {Word-Wrap: Break-Wort;} eine relativ gute Wahl.
Angesichts einer solchen schlechten Unterstützung des Browsers können wir dieses Problem jedoch nicht lösen, ohne JavaScript zu verwenden. Das heißt, wenn der Browser die CSS -Lösung nicht unterstützt, fügen Sie die "8203" -Zeichen in die entsprechende Position der kontinuierlichen Zeichenfolge ein (natürlich können Sie auch <wbr /> und "schüchtern; für die Unterstützung dieser drei Zeichen des Browsers im Browser verwenden. Bitte sehen Sie.
function fnBreakWordAll(o){var o = o || {},
iWord = O.Word || 13,,
ire = o.re || '[A-Za-Z0-9]',
Ball = O.All || FALSCH,
sclassname = o.className || 'Wort-Break-All',
aels = o.els || (Funktion(){
var aels = [],
Aallels = document.getElementsByTagName ('*'),
re = new regexp ('(?:^| // s +)' + sclassName + '(?: // s + | $)');
für (var i = 0, ilen = aAllels.length; i <ilen; ++ i) {
if (re.test (aallels [i] .className)) {
aels [aels.length] = aallels [i];
}
}
Aels zurückgeben;
}) () || [],,
fnbreakword = function (oel) {
// modifizieren Sie basierend auf http://www.hedgerwow.com/360/dhtml/css-word-break.html
if (! oel || oel.nodetype! == 1) {
false zurückgeben;
} else if (oel.currentStyle && typeof oel.currentStyle.wordwrap === 'String') {
breakword = function (oel) {
oel.runtimestyle.wordwrap = 'break-Wort';
zurückkehren;
}
Return Breakwort (OEL);
} else if (document.createTreewalker) {
var trim = function (str) {
str = str.replace (/^/s/s*/, '');
var ws = // s/,,
i = str.length;
während (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;
}
zurückkehren;
}
Return Breakwort (OEL);
}
};
für (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]);
}
}
}
Für bestimmte Anwendungen finden Sie im Demo -Beispiel
Die FnWordBreakall -Funktion bietet einige benutzerdefinierte Parameter, und die Verwendungsmethoden und Parameter sind wie folgt:
fnWordBreakAll({word:15,re:'[//w]',all:true});| Parameter | Wert | veranschaulichen |
|---|---|---|
| Wort | Positive Ganzzahl, Standard ist 13 | Wörter in dieser Wortzahl werden nicht in /u8203 eingefügt. Es gibt nicht viele Wörter mit mehr als 13 Buchstaben in meinem Eindruck, was sicherstellen kann, dass die meisten Wörter nicht gebrochen werden |
| Re | Regelmäßiger Ausdruck, Standard [A-Za-Z0-9] | Regelmäßiger Ausdruck eines Wortes, um festzustellen, aus welchen Zeichen ein Wort besteht, achten Sie auf die Flucht von / / |
| alle | Boolescher Wert, Standard falsch | Stellen Sie fest, ob es in Opera und Firefox standardmäßig in allen Browsern ausgeführt wird. Wenn die Klassenanwendung auf Safari in TH oder TD ausgeführt wird, wird dies hauptsächlich verwendet, wenn .Word-Break-All nicht definiert ist. |
| Klassenname | Name des Rechtsunterrichts, Standard-Wortausbruch-All | Der entsprechende Attributname des Elements der Ausführungsfunktion |
Der Kernteil dieser Funktion wurde aus Hedger Wang modifiziert. Eine JavaScript -Lösung "Cross Browser Word Breaker" wurde zusammengestellt. Es verwendet document.createTreewalker- und geteilte Methoden, um jedem Charakter in Nicht-I-Browsern "#8203" hinzuzufügen. Es ist im Grunde kein Problem, wenn es in reinem chinesischem Text verwendet wird. Wenn Sie jedoch die Beispiele beobachten, die er angibt, werden Sie feststellen, dass der Text, wenn es im Text Englisch oder Zahlen im Text gibt, zwar das Lesen des Textes schwer zu lesen und den Abstand zwischen den Zeichen zu erhöhen.