Heim > Artikel > Web-Frontend > Wie kann verhindert werden, dass Wörter in einer HTML-Tabelle in Zeilen aufgeteilt werden?
Wenn Sie eine Zeile umbrechen müssen, können Sie den Zeilenumbruch mit der Eigenschaft „word-break“ in CSS ändern. Textzeilenumbrüche erscheinen normalerweise nur an bestimmten Positionen, beispielsweise nach einem Leerzeichen oder Bindestrich. Im Folgenden finden Sie die Syntax für die Silbentrennung
word-break: normal|break-all|keep-all|break-word|initial|inherit;
Lassen Sie uns in diesen Artikel eintauchen, um besser zu verstehen, wie Sie Wortumbrüche in HTML-Tabellen verhindern können. Werfen wir vorher noch einen kurzen Blick auf die HTML-Tabelle.
Webdesigner können HTML-Tabellen verwenden, um Informationen wie Text, Bilder, Links und andere Tabellen in Zeilen und Spalten von Zellen zu organisieren.
erstellt werden. Standardmäßig werden reguläre und linksbündige Elemente unter | platziert.
Verhindern Sie, dass Wörter in HTML-Tabellen in verschiedene Zeilen aufgeteilt werdenUm besser zu verstehen, wie man Wortumbrüche in HTML-Tabellen verhindert, schauen wir uns das folgende Beispiel an. BeispielIm folgenden Beispiel verwenden wir word-break: keep-all, um zu verhindern, dass Wörter in verschiedene Zeilen aufgeteilt werden. <!DOCTYPE html> <html> <body> <style> table { width:100px; border:1px solid black; } th, td { word-break:keep-all; border:1px solid black; } </style> <table cellspacing="0"> <thead> <tr> <th style="display:none">ID</th> <th>SNO.</th> <th>Vehicle</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Verna</td> <td>Break Failure, BreakPads Problem</td> </tr> </tbody> </table> </body> </html> Wenn Sie das Skript ausführen, generiert es eine Ausgabe, die eine mit Daten gefüllte Tabelle enthält und „word-break:keep-all“ verwendet, um zu verhindern, dass Silbentrennungen auf der Webseite angezeigt werden. BeispielSehen wir uns das folgende Beispiel an, in dem wir eine einfache Webseite mit dem Leerzeichenattribut und dem Wert „keine Zeilenumbrüche“ erstellen. <!DOCTYPE html> <html> <body style="background-color:#EAFAF1"> <style> table.violetTable td, table.violetTable th { white-space: nowrap; border: 2px solid #5B2C6F ; padding: 4px 3px; text-align: left; } </style> <table class="violetTable"> <tr> <td>Welcome to TutorialsPoint</td> </tr> </table> </body> </html> Wenn Sie das obige Skript ausführen, erscheint ein Ausgabefenster, in dem der Text aus den Tabellendaten angezeigt wird; er wird größer, wenn der Text im Code länger wird, es werden jedoch keine Wörter umgebrochen. |
Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Wörter in einer HTML-Tabelle in Zeilen aufgeteilt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!