Question

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

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

.wrapper{
  width: 400px;
  height: 300px;
  border: solid 1px;
}

.wrapper .left{
  float: left;
  width: 200px;
  height: 200px;
  border: solid 1px;
  background-color: #111111
}

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

你会注意到文字落到了底部，

如果文本中存在空格，它将包装正确并且位于wright上，所以我想知道为什么word-wrap：break-word或word-wrap：break-all不起作用？

Answer 1

NoobEditor参考你的回答你的意思是说“只有当没有空格而不是单词中有空格时，自动换行才有用吗？自动换行的原因不是在上面的代码中工作是由于关闭div的错误放置。

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

如果你在正确的位置关闭div标签，自动换行将起作用：

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

见here

Answer 2

.right不应该是inline。另外，为它指定一些宽度。

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

DEMO here.

Answer 3

您也可以使用word-wrap: break-word;

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

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;
}

为什么断字在这里不起作用？

4 个答案: