當需要換行時，可以使用 CSS 中的 word-break 屬性來更改換行符。文本換行符通常僅出現在特定位置，例如空格或連字符之后。以下是斷字的語法
word-break: normal|break-all|keep-all|break-word|initial|inherit;
登錄后復制
讓我們深入閱讀這篇文章，以便更好地了解如何防止 HTML 表格中的單詞斷行。在此之前，讓我們快速瀏覽一下 HTML 表格。
HTML 表格
網頁設計人員可以使用 HTML 表格將文本、圖像、鏈接和其他表格等信息組織到單元格的行和列中。
<table> 標簽用于生成 HTML 表。表格行是使用 <tr> 標簽創建的，而數據單元格是使用 <td> 標簽創建的。默認情況下，常規元素和左對齊元素位于 <td> 下。
防止 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表格中的單詞分行？的詳細內容，更多請關注www.92cms.cn其它相關文章！
