html td 内自动换行

作者：◇梦◆饭饭发布日期:2025-07-24 浏览:24

<!DOCTYPE html>
<html>
<head>
    <title>HTML TD 自动换行示例</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        td {
            border: 1px solid black;
            /* 设置表格单元格内的文本自动换行 */
            word-wrap: break-word;
            /* 或者使用 white-space: pre-wrap; 也可以实现自动换行 */
            white-space: normal;
            padding: 5px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>
                这是一段很长的文本，用于演示如何在 HTML 表格单元格内自动换行。当文本长度超过单元格宽度时，文本将自动换行。
            </td>
        </tr>
    </table>
</body>
</html>

解释说明：

word-wrap: break-word;：允许长单词或 URL 地址换行到下一行。
white-space: normal;：默认情况下，文本会在必要时自动换行。如果你希望保留空白符序列，并且只在必要时换行，可以使用 white-space: pre-wrap;。
padding: 5px;：为单元格内容添加内边距，使内容与边框之间有一定的间距。

通过这些样式设置，表格单元格中的文本将根据需要自动换行，而不会超出单元格的宽度。

上一篇：html 播放器

下一篇：html 转义符