HTML 表格换行文本 - CSS

在 HTML 表格中，有时候我们需要在单元格中显示多行文本。这时候可以使用 CSS 的 white-space 和 word-wrap 属性来设置单元格中的文本换行显示。

white-space 属性

white-space 属性用于设置元素中空白符的处理方式，常用的取值有：

• normal：自动处理空白符，多个空白符会合并成一个空格，行内文本会自动换行；
• pre：保留所有空白符，行内文本不会自动换行；
• nowrap：删除所有换行符和空白符，行内文本不会自动换行。

我们可以通过设置该属性为 pre-wrap 或 pre-line 来实现在单元格中换行显示预设文本。

td {
  white-space: pre-wrap; /* 换行显示预设文本 */
}

下面是一个例子：

| 姓名 | 年龄 | 自我介绍 | | ---- | ---- | -------- | | 张三 | 24 | 你好，我的名字是张三，我是一名前端工程师。我喜欢写代码，喜欢探索新的技术。 | | 李四 | 28 | 我是一个喜欢旅行的人，我已经去过了很多国家和城市。 | | 王五 | 30 | 单元格中可以换行显示预设文本。 |

word-wrap 属性

有时候我们在单元格中插入的文本很长，而且中间不带空格，如果不设置换行，就会导致单元格变得很宽，影响页面的美观。此时，我们可以使用 word-wrap 属性来强制在单词内换行。

td {
  word-wrap: break-word; /* 在单词内换行 */
}

下面是一个例子：

| 姓名 | 年龄 | 自我介绍 | | ---- | ---- | -------- | | 张三 | 24 | 这是一段非常长的文本，其中没有空格。如果不设置 word-wrap: break-word;，将会导致单元格变得很宽而且不美观。 | | 李四 | 28 | 这是另外一段非常长的文本，也没有空格。如果不设置 word-wrap: break-word;，将会导致单元格变得很宽而且不美观。 | | 王五 | 30 | 单元格中的文本可以换行和在单词内换行。 |

通过使用上述 CSS 属性，我们可以轻松实现在 HTML 表格中显示换行文本。