数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML 表格中防止单词换行
当需要换行时，可以使用 CSS 中的 word-break 属性进行更改。文本换行通常只出现在特定位置，例如空格或连字符之后。以下是 word-break 的语法
word-break: normal|break-all|keep-all|break-word|initial|inherit;
让我们深入了解这篇文章，以便更好地理解如何在 HTML 表格中防止单词换行。在此之前，让我们快速了解一下 HTML 表格。
HTML 表格
Web 设计师可以使用 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”来防止单词换行显示在网页上。
示例
让我们看一下以下示例，我们使用带有“no wrap”值的 white-space 属性创建一个简单的网页。
<!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>
运行上述脚本后，将出现一个输出窗口，显示表格数据中的文本；随着代码中文本的增长，它的大小也会随之增长，但不会换行。
更新于: 2023年4月20日
981 次查看
广告