Heim > Artikel > Web-Frontend > Wie kann verhindert werden, dass Wörter in einer HTML-Tabelle in Zeilen aufgeteilt werden?
Wie kann verhindert werden, dass Wörter in einer HTML-Tabelle in Zeilen aufgeteilt werden?
- WBOYnach vorne
- 2023-09-16 22:45:03512Durchsuche
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.
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!