Wie kann man Text in einem -Element ohne Leerzeichen in allen Browsern umbrechen?

Element ohne Leerzeichen in allen Browsern? " />

CSS: Text ohne Leerzeichen in einem umbrechen

In diesem Artikel befassen wir uns mit einem Problem im Zusammenhang mit dem Umbrechen von Text ohne Leerzeichen Um dies zu erreichen, wurden verschiedene CSS-Eigenschaften wie Wortumbruch und Tabellenlayout verwendet. Das Verhalten unterscheidet sich jedoch von Browser zu Browser, so dass Firefox-Benutzer nicht umbrochenen Text haben.

Um diese Diskrepanz zu beheben, wurde der folgende CSS-Code entwickelt:

.wrapword {
  white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
  white-space: -webkit-pre-wrap; /* Chrome & Safari */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: pre-wrap; /* CSS3 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  word-break: break-all;
  white-space: normal;
}

Um diesen Code zu verwenden, wenden Sie die Wrapword-Klasse auf das gewünschte -Element an und stellen Sie sicher, dass das Tabellenlayout festgelegt ist zu behoben. Zum Beispiel:

<table>

Diese CSS-Lösung wurde getestet und funktioniert konsistent in Firefox 5.0, Internet Explorer 8.0 und Chrome 10.

Das obige ist der detaillierte Inhalt vonWie kann man Text in einem -Element ohne Leerzeichen in allen Browsern umbrechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!