Wie kann der Textumbruch in Tabellenzellen in allen Browsern sichergestellt werden?

CSS für Textumbruch innerhalb von Tabellenzellen

In Fällen, in denen Text innerhalb einer Tabellenzelle umgebrochen werden muss, ist es wichtig, die Browserkompatibilität zu berücksichtigen . Während die Verwendung von Wort-break: break-all; und Tabellenlayout: fest; Für Chrome reicht es möglicherweise aus, in Firefox funktioniert es möglicherweise nicht wie erwartet.

Browserübergreifende Kompatibilität

Um dieses Browserkompatibilitätsproblem zu beheben, kann eine umfassendere CSS-Lösung sein eingesetzt:

.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;
}

Dieses CSS stellt sicher, dass Text in verschiedenen Browsern ordnungsgemäß umbrochen wird. Durch Anwenden der Wrapword-Klasse auf eine Tabellenzelle wird der Text automatisch ohne unerwünschte Leerzeichen umgebrochen:

<table>

Mit dieser Technik kann Text in Tabellenzellen effektiv umbrochen werden, wodurch die browserübergreifende Kompatibilität gewahrt bleibt.

Das obige ist der detaillierte Inhalt vonWie kann der Textumbruch in Tabellenzellen in allen Browsern sichergestellt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!