休息在这里不起作用？

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

你会注意到文字下降到底部，

如果文本中存在空格，它将包装正确并位于赖特上，所以我想知道为什么单词包装：分词或单词包装：分解全部不起作用？

---

.right不应该inline 。 另外，给它分配一些宽度。

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

在这里演示。

---

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

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

---

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

在这里看到它

链接地址: http://www.djcxy.com/p/88105.html

上一篇: break doesn't work here?

下一篇: How can I wrap or break long text/word in a fixed width span?