为什么这里 word-break 不起作用？

Question

http://codepen.io/rick-li/pen/oshCb

<div class="wrapper">
  <div class="left"></div>
  <span>lfjaslkjasldjfaljdfaldflasjflasjdfldasfsdafafasdfsdafadsfazxcvzvzxv</span>
</div>

.wrapper{
  宽度: 400像素;
  高度: 300像素;
  边框: 实线1像素;
}
.wrapper .left{
  浮动: 左;
  宽度: 200像素;
  高度: 200像素;
  边框: 实线1像素;
  背景颜色: #111111
}
.wrapper span{
  单词换行: 断开;
}

您会注意到文本下移了，

如果文本中存在空格，它将正确换行并居于右侧，所以我想知道为什么单词换行：断开或单词换行：拆分全部不起作用？

- Rick Li

---

额，我刚在Chrome里试过了，它确实有效：http://codepen.io/anon/pen/FqCzA ，使用break-word即可。 - Ming

@setek，你没明白，整个span.right的内容都被删除了。如果你添加几个空格，它就会正确地换行并位于右侧。 - Rick Li

哦，我现在明白了，好的 :) 正在回答.. - Ming

Answer 1

您还可以使用word-wrap: break-word;来实现换行；

.wrapper .right{
  display: block;
  width:200px;
}
.wrapper .right{
  word-wrap:break-word;
}

- msapkal

Answer 2

.right不应该是inline，还需要指定宽度。

.wrapper .right{
  display: block;
  width: 200px;
}
.wrapper .right{
  word-break: break-all;
}

这里查看演示。

- codingrose

Answer 3

在您的答案中，NoobEditor是指“只有在单词中没有空格时word-wrap才起作用”，而不是当单词中有空格时才起作用吗？上面代码中 word-wrap 不起作用的原因是关闭 div 的位置不正确。

<div class="wrapper">
    <div class="left"></div> <!-- here is your problem -->
    <span>lfjaslkjasldjfaljdfaldflasjflasjdfldasfsdafafasdfsdafadsfazxcvzvzxv</span>
</div>

如果您在正确的位置关闭div标签，word-wrap就会起作用：

<div class="wrapper"> 
    <div class="left">
    <span>lfjaslkjasldjfaljdfaldflasjflasjdfldasfsdafafasdfsdafadsfazxcvzvzxv</span>
    </div> <!-- close statement here -->
</div> <!-- close statement here -->

在这里查看

- truleighsyd

Answer 4

你可以通过几种方式来实现，可以将显示方式从inline更改为使其可以设置max-width，这样它就知道何时应该断开单词：

http://codepen.io/anon/pen/ibvKq

.wrapper .right{
  display: inline-block;
  max-width: 290px;
  word-wrap: break-word;
}

或者，如果您想保留inline，则需要将word-wrap: break-word;与white-space: pre;配对，但这意味着它将保留换行符和空格。个人而言，我会选择第一种方法而不是这种方法。

http://codepen.io/anon/pen/cfhwI

.wrapper .right{
  display: inline;
  white-space: pre;
  word-wrap: break-word;
}

- Ming