CSS 在白空格单词之间断行

在本文中，我们将介绍 CSS 如何通过使用word-wrap属性和word-break属性来控制在白空格单词之间断行的方式。

阅读更多：CSS 教程

什么是白空格单词？

在HTML文档中，单词通常是由空格分隔的一系列字符。当浏览器渲染文本时，它会根据空格将文本分割成单词。而在这些单词之间的空格被称为“白空格”。CSS可以控制如何在这些白空格之间断行。

`word-wrap`属性

word-wrap属性用于指定当一个单词太长而无法完全显示在一行时，是否允许断行。它有两个可能的值：

normal：默认值，表示单词在必要时会被截断但不会断行。
break-word：表示单词可以断行，以便可以完全显示在一行。

下面是一个示例，展示了两个使用了不同word-wrap值的div元素：

div {
  width: 200px;
  border: 1px solid black;
}

.normal {
  word-wrap: normal;
}

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

<div class="normal">Thisisaverylongwordthatcannotbefullydisplayedinone line.</div>
<div class="break-word">Thisisaverylongwordthatcannotbefullydisplayedinone line.</div>

在上面的示例中，第一个div元素使用word-wrap: normal，单词不会断行，因此整个单词被截断显示在一行中。而第二个div元素使用word-wrap: break-word，它允许单词断行，并且在容器宽度超出时将单词分割成多行来完全显示。

`word-break`属性

word-break属性用于指定单词在哪个位置断行。它有几个可能的值：

normal：默认值，表示浏览器会在允许的断行点处断行。
break-all：表示浏览器会在任何位置断行，即使在一个字符内也可以断行。
keep-all：表示浏览器只会在字符之间断行，而不会在单词内部断行。

下面是一个示例，展示了两个使用了不同word-break值的div元素：

div {
  width: 200px;
  border: 1px solid black;
}

.normal {
  word-break: normal;
}

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

<div class="normal">Thisisaverylongwordthatcannotbefullydisplayedinoneline.</div>
<div class="break-all">Thisisaverylongwordthatcannotbefullydisplayedinoneline.</div>

在上面的示例中，第一个div元素使用word-break: normal，它会在允许的断行点处断行，这意味着单词不会被截断，而是被移动到下一行来显示。而第二个div元素使用word-break: break-all，它会在任何位置断行，这导致单词在容器宽度超出时被分割成多行来完全显示。

`white-space`属性

除了word-wrap和word-break属性外，我们还可以使用white-space属性来控制文本在白空格处断行的方式。white-space属性有几个可能的值：

normal：默认值，表示浏览器会忽略连续的白空格和换行符，将它们合并为一个空格，并且在必要时断行。
nowrap：表示浏览器会忽略连续的白空格和换行符，将它们合并为一个空格，但不会断行。
pre：表示浏览器会保留连续的白空格和换行符，并按照源代码中的样式进行显示，不会断行。
pre-wrap：表示浏览器会保留连续的白空格和换行符，并且在必要时断行。
pre-line：表示浏览器会忽略连续的白空格和换行符，将它们合并为一个空格，并且在必要时断行。

下面是一个示例，展示了五个使用了不同white-space值的div元素：

div {
  width: 200px;
  border: 1px solid black;
}

.normal {
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

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

.pre-line {
  white-space: pre-line;
}

<div class="normal">This is      a long text that cannot be fully displayed in one line.</div>
<div class="nowrap">This is      a long text that cannot be fully displayed in one line.</div>
<div class="pre">This is
a long text that cannot be fully displayed in one line.</div>
<div class="pre-wrap">This is
a long text that cannot be fully displayed in one line.</div>
<div class="pre-line">This is      a long text that cannot be fully displayed in one line.</div>

在上面的示例中，我们可以观察到不同white-space值的效果。使用normal值时，连续的白空格被合并为一个空格，并且在必要时断行；使用nowrap值时，连续的白空格被合并为一个空格，但不会断行；使用pre值时，连续的白空格和换行符都会被保留，按照源代码中的样式进行显示，不会断行；使用pre-wrap值时，连续的白空格和换行符都会被保留，并且在必要时断行；使用pre-line值时，连续的白空格被合并为一个空格，并且在必要时断行。

总结

在本文中，我们介绍了如何使用word-wrap属性和word-break属性来控制在白空格单词之间断行的方式。我们还介绍了white-space属性的几个可能的值，这些值也可以用来控制断行的方式。通过合理地使用这些CSS属性，我们可以在处理长单词和文本时达到更好的显示效果。现在你可以根据实际需求选择适合的属性值来控制断行，并改善你的网页的可读性和美观性。