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?

WBOY
WBOYnach vorne
2023-09-16 22:45:03510Durchsuche

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.

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.

-Tag wird zum Generieren von HTML-Tabellen verwendet. Tabellenzeilen werden mit dem Tag erstellt, während Datenzellen mit dem Tag
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 werden

Um besser zu verstehen, wie man Wortumbrüche in HTML-Tabellen verhindert, schauen wir uns das folgende Beispiel an.

Beispiel

Im 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.

Beispiel

Sehen 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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen