Wie kann verhindert werden, dass Wörter in einer HTML-Tabelle in Zeilen aufgeteilt werden?-HTML-Tutorial-php.cn

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;

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!

Verwandte Etiketten：

防止 html表格单词分行

Quelle：tutorialspoint.com

Vorheriger Artikel：Wie können wir die Anzahl der sichtbaren Zeilen eines Textbereichs in HTML festlegen? Nächster Artikel：Wie wende ich eine Funktion gleichzeitig von rechts nach links auf zwei Werte eines Arrays an?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors