使用 word-wrap: break-word 在两个连续的长单词上

Question

当在 div 上使用 word-wrap: break-word 有两个连续的长单词时，被打断的第二个单词另起一行，例如：

IAmALongW
ord
IAmAlsoAL
longword

在 css 中有什么方法可以防止这种情况发生？

IAmALongW
ord IAmAl
soALongwo
rd

不恢复断字：当然是断字。

Answer 1

我相信使用 white-space: pre; 应该可以。

Answer 2

.container{
  width: 100px;
  display: inline-block;
  border: 1px solid black;
  word-wrap: break-word;
  white-space: pre;
}

<div class="container">
  <p>thisisaverylongword anotherverylongword</p>
</div>

Answer 3

正在使用

&nbsp;

在单词之间而不仅仅是 space 可以帮助防止元素在您不想要的地方强制中断。例如，当您不想在一行中单独留下一个小词时，这会有所帮助。

Using word-wrap: break-word on two consecutive long words