word-break word-wrap white-space 使用方法

word-break、word-wrap 和 white-space 是用于控制文本在页面上显示时的布局和换行等样式的 CSS 属性。

1. word-break：

   • word-break 属性用于指定在何处可以中断单词，以防止单词溢出其容器。
   • 常见的取值有：
     • normal：使用默认的断字规则。（对于大多数语言，包括英语、中文等，这通常意味着单词将在空格或连字符等断字点处换行。这样可以确保文本在不同浏览器和设备上的一致显示，并且不会在单词内部随意断开，从而保持文本的可读性。）
     • break-all：在单词内允许换行。
     • keep-all：只在断字点处换行，适用于中文和日文等不使用空格分隔单词的语言。

   .example { word-break: break-all; }

2. word-wrap：

   • word-wrap 属性控制是否允许长单词或字符串在它们的边界内换行，以避免溢出容器。
   • 常见的取值有：
     • normal：使用默认的换行规则。
     • break-word：允许在单词内换行，避免溢出容器。

   .example { word-wrap: break-word; }

3. white-space：

   • white-space 属性用于设置元素内文本的处理方式，包括空白字符的处理和换行。
   • 常见的取值有：
     • normal：默认值，空白字符会被合并，换行会被忽略。
     • nowrap：不允许文本换行。
     • pre：保留空白字符，但不允许文本换行。
     • pre-wrap：保留空白字符，允许文本换行。
     • pre-line：合并多余的空白字符，允许文本换行。

.example { white-space: pre-wrap; }