CSS 只显示适合容器的整词

在本文中，我们将介绍如何使用CSS和JavaScript来实现只显示适合容器的整词的效果。
有时，当我们需要在一个容器中显示文本时，我们希望文本只显示整个词，而不是被截断成一半的词。这样可以提高可读性，避免页面布局混乱。

阅读更多：CSS 教程

使用CSS的word-break属性

CSS的word-break属性可以设置如何处理长单词或URL等文本片段在容器边界之外时应该如何换行。默认情况下，该属性的值为normal，表示长单词和URL等文本片段可以跨越多个行而不被强制换行。为了只显示适合容器的整词，我们可以将word-break属性的值设置为break-all或keep-all。

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

上述CSS代码会使容器内的文本根据需要强制换行，以确保每个单词都能够适应容器的宽度，并完整显示出来。

使用JavaScript截取文本

除了CSS的word-break属性外，我们还可以借助JavaScript来截取文本，以确保只显示适合容器的整词。
首先，我们需要通过JavaScript获取到容器元素和其中的文本内容，在此基础上进行处理。

<div class="container">
  In today's garden, the tomatoes are juicy and the sunflowers are in full bloom.
</div>

var container = document.querySelector(".container");
var text = container.innerText;

接下来，我们可以使用正则表达式来匹配整个词，并将匹配到的词重新赋值给容器元素。
下面的JavaScript代码将会截取文本，只显示适合容器的整词。

var words = text.match(/w+/g);
container.innerText = words.join(" ");

通过以上代码，我们将文本内容根据整词进行了截取，并重新赋值给了容器元素。这样，容器中的文本就只显示适合容器的整词了。

示例

假设有一个容器，其中的文本内容为：”Hello, welcome to OpenAI!”。根据默认的CSS样式，这段文本在容器中会被全部显示出来。而我们希望只显示适合容器的整词。
我们可以使用上述提到的CSS和JavaScript的方法来实现这个效果。

<div class="container">
  Hello, welcome to OpenAI!
</div>

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

var container = document.querySelector(".container");
var text = container.innerText;

var words = text.match(/w+/g);
container.innerText = words.join(" ");

通过以上代码，文本将会被截取为：”Hello welcome to”, 因为这三个单词是整词，并且适应了容器的宽度。