首頁 > 文章 > web前端 > 如何防止HTML表格中的單字分支？

如何防止HTML表格中的單字分支？

WBOY轉載: 2023-09-16 22:45:03509瀏覽

如何防止HTML表格中的單字分支？

當需要換行時，可以使用 CSS 中的 word-break 屬性來變更換行符號。文字換行符通常只出現在特定位置，例如空格或連字號之後。以下是斷字的語法

word-break: normal|break-all|keep-all|break-word|initial|inherit;

讓我們深入閱讀這篇文章，以便更好地了解如何防止 HTML 表格中的單字斷行。在此之前，讓我們快速瀏覽一下 HTML 表格。

HTML 表格

網頁設計人員可以使用 HTML 表格將文字、圖像、連結和其他表格等資訊組織到單元格的行和列中。

標籤用於產生 HTML 表。表格行是使用標籤建立的，而資料儲存格是使用

標籤建立的。預設情況下，常規元素和左對齊元素位於

下。

防止 HTML 表格中的單字分成不同的行

為了更好地理解如何防止 HTML 表格中的單字斷行，讓我們看看以下範例。

範例

在下面的範例中，我們使用 word-break: keep-all 來防止單字分成不同的行。

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

執行腳本時，它將產生一個輸出，其中包括一個填充了資料的表格，並使用「word-break:keep-all」來防止網頁上顯示斷字。

範例

讓我們來看看下面的範例，其中我們使用值為「不換行」的空白屬性來建立一個簡單的網頁。

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

當你執行上面的腳本時，會出現一個輸出窗口，顯示表格資料中的文字；它會隨著程式碼中的文字變長而變大，但不會斷詞。

以上是如何防止HTML表格中的單字分支？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html break table td tr word

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：我們如何在HTML中設定文字區域的可見行數？下一篇：我們如何在HTML中設定文字區域的可見行數？

看更多