文本溢出换行符 - CSS

在 CSS 中，我们经常需要控制文本的显示方式，确保在不同的设备和屏幕上看起来良好。当文本的长度超过容器的宽度时，文本会溢出容器并跑到容器外面。这时，我们可以使用 CSS 的文本溢出换行符来解决问题。

概述

CSS 的文本溢出换行符主要用于控制当文本到达容器边界时如何进行换行。常用的文本溢出换行符有以下三种：

1. word-break：控制单词如何在容器内断行。
2. overflow-wrap：控制非单词断行位置。
3. white-space：控制文本如何进行空白符处理。

下面将介绍这三种溢出换行符的用法和实例。

word-break

word-break 属性用于控制单词如何在容器内断行。该属性有以下可选值：

• normal：使用浏览器默认的换行规则。这也是默认值。
• break-all：允许单词内断行。
• keep-all：尽可能在单词间断行，仅当必要时才在单词内断行。
• break-word：允许在单词内断行，如果不行就在单词的开头插入换行符。

下面是示例代码：

/* 默认值 */
word-break: normal;

/* 允许单词内断行 */
word-break: break-all;

/* 尽可能在单词间断行 */
word-break: keep-all;

/* 允许在单词内断行 */
word-break: break-word;

overflow-wrap

overflow-wrap 属性用于控制非单词断行位置。该属性有以下可选值：

• normal：使用浏览器默认的换行规则。这也是默认值。
• break-word：允许在单词内断行，如果不行就在单词的开头插入换行符。

下面是示例代码：

/* 默认值 */
overflow-wrap: normal;

/* 允许在单词内断行 */
overflow-wrap: break-word;

white-space

white-space 属性用于控制文本如何进行空白符处理。该属性有以下可选值：

• normal：由浏览器自动处理，忽略多余的空白符。
• pre：保留所有的空格和换行符，不考虑元素边界。
• nowrap：忽略所有的空白符，强制在单行内显示文本。
• pre-wrap：保留所有的空格和换行符，不会影响文本样式。
• pre-line：将文本中的所有换行符转化为空格，并忽略多余的空白符。

下面是示例代码：

/* 标准处理方式 */
white-space: normal;

/* 保留空格和换行符 */
white-space: pre;

/* 显示单行文本 */
white-space: nowrap;

/* 保留空格和换行符 */
white-space: pre-wrap;

/* 忽略空格，保留换行符 */
white-space: pre-line;

结论

掌握了 CSS 的文本溢出换行符，我们就可以更好地控制文本的显示方式，确保文本在不同的设备和屏幕上看起来良好。不同的属性和属性值结合使用，可以产生各种不同的效果。请根据自己的需要选取合适的属性和属性值。