CSS换行如何在不打断单词的情况下包裹整个单词？

Question

CSS换行如何在不打断单词的情况下包裹整个单词？

43

我需要将一段长文本适应大约300像素的宽度。我正在使用以下css：

 div {      
      width: 300px;
      color:white;
      word-wrap:break-word;
      }

我的问题在于word-wrap:break-word;。它会在单词中间断开单词。但我需要的是让单词保持原样，并让文档在适当的时候智能地换行，同时保持单词本身不变。

这可行吗？我尝试了每个word-wrap选项，但都不起作用。要么段落没有断开，文本停留在屏幕外，要么单词断开，两个字母在一行，而其他字母在下一行。

编辑：添加我的代码以形成一个具体的示例。我的整个style元素：

<style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular; min-height: 12.0px}

div {
    width: 300px;
    color:white;
    font-size:10px;
    word-wrap:break-word;
}

pre {white-space:break;}

</style>

然后在 body 元素中：

<body bgcolor="#1fa0e2">
<p class="p1">
<div>
<bdo dir="rtl">
<pre>
    דירת 3 חדרים ברחוב ארתור רובינשטיין בתל אביב הוצעה באחרונה למכירה ב–2.5 מיליון שקל, ובסופו של דבר נמכרה ב–2.195 מיליון בלבד - פער של 12% בין המחיר המבוקש למחיר המכירה. בירושלים, דירת 4 חדרים ברחוב צביה יצחק הוצעה למכירה ב–1.6 מיליון שקל ונמכרה ב–40% פחות - 950 אלף שקל בלבד.

</pre>
</div>
</bdo>
<span class="Apple-converted-space"> </span></p>

</body>
</html>

- Eddy

如果你正在排版类似诗歌的东西，你可以使用<pre>元素，但除此之外，我认为你应该考虑使用white-space属性。 - Marc Audet

信息不足。评论现在说内容在 pre 中，这是至关重要的。请编辑问题本身，提供足够的信息以便能够重新复现问题。 - Jukka K. Korpela

嗨@JukkaK.Korpela，我添加了代码，应该可以实现这个功能。 - Eddy

仍然不清楚您想要什么。pre元素表示预格式化文本。当您不想要预格式化文本（即，间距和换行符与HTML源代码完全相同）时，为什么要使用它？普通的p元素足以显示一个段落的文本。然后文本将在空格处换行。 - Jukka K. Korpela

1

@Eddy，那么您应该描述数据格式和呈现要求。这听起来像是一个不同的问题。也许如果您不想将数据转换为良好标记的HTML，则使用带有white-space: pre-wrap的div是最佳选择，但这取决于确切的要求。如果您现在有空行表示逻辑段落边界，正如我所怀疑的那样，将它们转换为<p>标签应该相当简单。这可能是您需要的全部内容（除了包含元素的dir=rtl）。 - Jukka K. Korpela

显示剩余2条评论

4个回答

39

我在尝试这个时遇到了问题。人们没有提到需要设置单词换行样式。默认的单词换行规则会在容器空间的末尾换行，但不会保持单词完整。

因此，在CSS中解决你的问题的方法是：

pre{
    white-space: pre-wrap;
    word-break: keep-all; /*this stops the word breaking*/
}

编辑：我进一步调整了这个问题，因为我正在使用bootstrap，他们的样式似乎会对pre标签产生很大的影响。使用!important关键字来覆盖他们的样式。

- davidjohnclarke

5

“Keep-all”是保持单词完整的额外行，+1。 - SushiGuy

我正在使用东亚字符，我必须使用word-break: keep-all来防止换行，谢谢！例如 Stan 스탠 スタン - cyclingLinguist

5

您可以使用<span>标签来包装单词，然后添加white-space: nowrap或者display: inline-block样式。

- JAT86

white-space:pre-wrap + word-break:keep-all在使用span + display:block时无效，但在使用inline-block时可以。感谢您的提示！ - err

1

注意：确保您的数据不像这样读取：word word word，或者其他浏览器会认为它是一个单词。

听起来很疯狂，但我们公司移动应用程序中的一个错误就是这样做的，直到我检查了我们的API数据，我才以为互联网出了故障:p

- Lux.Capacitor

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- GolezTrol · Accepted Answer

你不需要做任何特别的事情。通常文本将在单词之间进行换行。

如果这并没有发生，那么

可能是容器太宽了
容器被明确设置为完全不在空格处换行。例如，如果它是一个
```
元素，或者具有css white-space:pre;或white-space:nowrap;
```
文本包含不间断空格( )而不是普通空格。

解决方案：使用

white-space: pre-wrap;

它会使元素的表现行为类似于 pre 元素，但在行太长时也会换行。参见： http://css-tricks.com/almanac/properties/w/whitespace/