极客笔记CSS 如何阻止表格单元格中的文本换行
在HTML中，表格用于以格式化方式在网页上显示数据。例如，我们可以显示学生、产品、订单、订阅等数据。
有时，我们会得到较长的数据，我们需要以表格格式显示。例如，产品描述可能会比其他产品信息更长。因此，在这种情况下，我们必须避免文本换行到下一行，以保持表格布局。
我们有一个简单的解决方案来避免表格单元格中的文本换行，即使用CSS的“white-space”属性。
语法
用户可以按照以下语法使用white-space CSS属性来阻止表格单元格中的文本换行。
white-space: nowrap;
在上述语法中，我们使用了‘nowrap’作为‘white-space’属性的值，以避免换行。
示例1
在下面的示例中，我们创建了包含城市数据的表格。同时，在表格标题中添加了长文本内容。在CSS中，我们使用各种属性对表格进行了样式设置。此外，我们还使用了‘white-space: nowrap’CSS属性来避免表格标题的换行。
在输出结果中，用户可以尝试改变浏览器窗口的宽度，并观察到表格标题不会换行。
<html>
<head>
<style>
table {border-collapse: collapse; width: 100%; font-size: 1.5rem;}
th, td {padding: 8px; text-align: left; border: 1px solid blue;}
tr:hover {background-color: #f5f5f5;}
th {background-color: #4CAF50; color: white; white-space: nowrap;}
</style>
</head>
<body>
<h2> Preventing the text wrap <i> in table cell from wrapping </i> using CSS</h2>
<table>
<thead>
<tr> <th> city - first column </th> <th> State - second column </th> <th> Population - Third column </th></tr>
</thead>
<tbody>
<tr> <td> Bengaluru </td> <td> Karnataka </td><td> 8.42 million </td> </tr>
<tr><td> Mumbai </td> <td> Maharashtra </td> <td> 18.41 million </td> </tr>
<tr> <td> Delhi </td> <td> Delhi </td> <td> 16.78 million </td> </tr>
<tr> <td> Hyderabad </td> <td> Telangana </td> <td> 6.81 million</td> </tr>
</tbody>
</table>
</body>
</html>
示例2
在下面的示例中，我们在每个表格单元格中添加了长文本内容。此外，我们将“white-space: nowrap” CSS属性添加到交替的表格单元格中。这意味着在第一列、第三列、第五列等中添加了white-space属性。
在输出中，用户可以观察到第二列的文本换行，而第一列和第三列没有换行。
<html>
<head>
<style>
table {border-collapse: collapse; width: 100%;font-size: 1.5rem;}
th,td {padding: 0.25rem; text-align: left; border: 2px solid blue;}
/* adding white-space for alternative table columns */
th:nth-child(2n+1),
td:nth-child(2n+1) {white-space: nowrap;}
</style>
</head>
<body>
<h2> Preventing the text wrap <i> in table cell from wrapping </i> using CSS </h2>
<table>
<thead>
<tr><th> first header </th>
<th> second header </th>
<th> Third header </th> </tr>
</thead>
<tbody>
<tr><td> first row, first cell </td>
<td> first row, second cell </td>
<td> first row, third cell </td></tr>
<tr><td> second row, first cell </td>
<td> second row, second cell </td>
<td> second row, third cell </td> </tr>
</tbody>
</table>
</body>
</html>
用户学会了如何防止表格单元格中的文本换行。通过换行文本，我们可以避免可读性问题。在本教程中，我们使用了’white-space’属性，但用户可以尝试使用’overflow’属性。