Dieser Artikel listet die empfohlenen CSS-Stile für Zeilenumbrüche auf, die mit IE und FF kompatibel sind, und beschreibt die Unterschiede zwischen Zeilenumbruch und Wortumbruch.
Zeilenumbruch CSS empfohlener Stil, kompatibel mit IE und FF
Der beste Weg ist
word-wrap:break-word; overflow:hidden;
anstatt
Zeilenumbruch:Wortumbruch; Wortumbruch:alles umbrechen;
Weder
word-wrap:break-word; overflow:auto;
Unter IE gibt es kein Problem, aber unter FF werden lange englische Zeichenfolgen über den Inhalt hinaus blockiert.
Der Unterschied zwischen Zeilenumbruch und Wortumbruch
Nachfolgend der zitierte Inhalt:
Zeilenumbruch:
normaler Standardinhalt überschreitet die Grenzen seines Containers.
Wortumbruch Der Inhalt wird in die nächste Zeile umgebrochen und bei Bedarf wird ein Wortumbruch ausgelöst. Wortbruch:
Normaler Standard. Ermöglicht Zeilenumbrüche innerhalb von Wörtern. Es scheint nur für asiatischen Text zu funktionieren.
break-all Verhält sich bei asiatischem Text genauso wie normal, ermöglicht jedoch einen willkürlichen Zeilenumbruch bei nicht-asiatischem Text. Dieser Wert eignet sich für asiatischen Text, der einige Auszüge nicht-asiatischen Textes enthält.
keep-all Ermöglicht keine Worttrennung für Chinesisch, Japanisch und Koreanisch. Funktioniert wie gewohnt für alle nicht-asiatischen Sprachen. Dieser Wert ist für Text optimiert, der kleine Mengen Chinesisch, Japanisch oder Koreanisch enthält. |
Die Zusammenfassung lautet wie folgt:
Word-Wrap steuert den Zeilenumbruch.
Bei Verwendung von break-word werden Zeilenumbrüche erzwungen. Es gibt kein Problem mit chinesischen Sätzen und es gibt kein Problem mit englischen Sätzen. Aber für lange Englischzeilen funktioniert es nicht.
break-word steuert, ob Wörter unterbrochen werden sollen.
„Normal“ ist die Standardsituation und englische Wörter werden nicht aufgeteilt.
Break-All ist ein Break-Wort. Wenn ein Wort eine Grenze erreicht, wird der nächste Buchstabe automatisch in die nächste Zeile verschoben. Löst hauptsächlich das Problem langer englischer Zeichenfolgen.
keep-all bezieht sich auf fortlaufende Wörter in Chinesisch, Japanisch und Koreanisch. Das heißt, wenn Sie dieses Mal nur ohne Zeilenumbruch verwenden, werden die Chinesen nicht umbrechen. (Englische Sätze sind normal.)
also unter:
Mit word-wrap:break-word; funktioniert alles einwandfrei.
ff weiter:
Wenn Sie diese beiden nicht verwenden, wird es mit Chinesisch keine Probleme geben. Auch mit englischen Sätzen wird es kein Problem geben. Allerdings können lange Zeichenfolgen im Englischen zu Problemen führen.
Um lange Zeichenfolgen im Englischen zu lösen, wird im Allgemeinen „word-wrap:break-word;word-break:break-all“ verwendet. Diese Methode führt jedoch dazu, dass die Wörter in gewöhnlichen englischen Sätzen getrennt werden (dasselbe gilt für ie).
Das Hauptproblem besteht derzeit darin, dass lange Zeichenfolgen aus Englisch und englischen Wörtern getrennt werden. Tatsächlich ist eine lange Zeichenfolge im Englischen nur ein relativ langes Wort.
Das heißt, sollten englische Wörter getrennt werden? Das Problem liegt auf der Hand und sollte natürlich nicht getrennt werden.
Bei langen Zeichenfolgen im Englischen ist es bösartig, sodass Sie sich darüber natürlich keine Sorgen machen müssen. Wir müssen uns jedoch auch einige Möglichkeiten überlegen, um zu verhindern, dass der Container erweitert wird.
Verwenden Sie: overflow:auto; unter dh, lange Zeichenfolgen werden automatisch umbrochen. ff, lange Saiten werden abgedeckt.
Zusammenfassend lässt sich sagen, dass der beste Weg „word-wrap:break-word;overflow:hidden;“ anstelle von „word-wrap:break-word;word-break:break-all;“ ist.
word-wrap:break-word;overflow:auto; Unter IE gibt es kein Problem. Unter ff werden lange Zeichenfolgen teilweise verdeckt.
Darüber hinaus lautet der Testcode wie folgt:
Nachfolgend der zitierte Inhalt:
1.htm============================================= = ==================== <Stil>
.c1{ width:300px; border:1px solid red}
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
.c5{ width:300px;word-break:break-all; border:1px solid black}
.c6{ width:300px;word-break:keep-all; border:1px solid red}
.c7{ width:300px;word-wrap:break-word;overflow:auto border:1px; einfarbig gelb}
</style> .c1{ width:300px; border:1px solid red}
<div class="c1">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c1>
Das ist alles Englisch. Das ist alles Englisch.
</div>
<div class=c1>
Alles auf Chinesisch. Alles auf Chinesisch. Alles auf Chinesisch.
</div>
<div class=c1>
Gemischte Anordnung aus Chinesisch und Englisch. Chinesisch und Englisch. Gemischte Anordnung aus Chinesisch und Englisch. Chinesisch und Englisch.
</div> <br>
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
<div class="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c2>
Das ist alles Englisch. Das ist alles Englisch.
</div>
<div class=c2>
Alles auf Chinesisch. Alles auf Chinesisch. Alles auf Chinesisch.
</div>
<div class=c2>
Gemischte Anordnung aus Chinesisch und Englisch. Chinesisch und Englisch. Gemischte Anordnung aus Chinesisch und Englisch. Chinesisch und Englisch.
</div> <br>
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
<div class="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c3>
Das ist alles Englisch. Das ist alles Englisch.
</div>
<div class=c3>
Alles auf Chinesisch. Alles auf Chinesisch. Alles auf Chinesisch.
</div>
<div class=c3>
Gemischte Anordnung aus Chinesisch und Englisch. Chinesisch und Englisch. Gemischte Anordnung aus Chinesisch und Englisch. Chinesisch und Englisch.
</div> <br>
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
<div class="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c4>
Das ist alles Englisch. Das ist alles Englisch.
</div>
<div class=c4>
Alles auf Chinesisch. Alles auf Chinesisch. Alles auf Chinesisch.
</div>
<div class=c4>
Gemischte Anordnung aus Chinesisch und Englisch. Chinesisch und Englisch. Gemischte Anordnung aus Chinesisch und Englisch. Chinesisch und Englisch.
</div> <br>
.c5{ width:300px;word-break:break-all; border:1px solid black}
<div class="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c5>
Das ist alles Englisch. Das ist alles Englisch.
</div>
<div class=c5>
Alles auf Chinesisch. Alles auf Chinesisch. Alles auf Chinesisch.
</div>
<div class=c5>
Gemischte Anordnung aus Chinesisch und Englisch. Chinesisch und Englisch. Gemischte Anordnung aus Chinesisch und Englisch. Chinesisch und Englisch.
</div> <br>
.c6{ width:300px;word-break:keep-all; border:1px solid red}
<div class="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c6>
Das ist alles Englisch. Das ist alles Englisch.
</div>
<div class=c6>
Alles auf Chinesisch. Alles auf Chinesisch. Alles auf Chinesisch.
</div>
<div class=c6>
Gemischte Anordnung aus Chinesisch und Englisch. Chinesisch und Englisch. Gemischte Anordnung aus Chinesisch und Englisch. Chinesisch und Englisch.
</div> <br>
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
<div class="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c7>
Das ist alles Englisch. Das ist alles Englisch.
</div>
<div class=c7>
Alles auf Chinesisch. Alles auf Chinesisch. Alles auf Chinesisch.
</div>
<div class=c7>
Gemischte Anordnung aus Chinesisch und Englisch. Chinesisch und Englisch. Gemischte Anordnung aus Chinesisch und Englisch. Chinesisch und Englisch.
</div> |
