我遇到了一個以前從未發(fā)生過的問題，而且似乎是前所未有的，一些文本沒有在div中換行。

以下鏈接是我的html代碼示例:

http://jsfiddle.net/NDND2/2/

<div id="calendar_container">
   <div id="events_container">  
      <div class="event_block">
         <div class="title">
            lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem
         </div>
      </div>
   </div>
</div>

有幫助嗎？？

我發(fā)現(xiàn)這有助于我的單詞在WooThemes的推薦插件中斷開。

.testimonials-text {
    white-space: normal;
}

在這里玩吧，http://nortronics.com.au/recomendations/

<blockquote class="testimonials-text" itemprop="reviewBody">

<a  class="avatar-link">

<img width="100" height="100" src="http://nortronics.com.au/wp-content/uploads/2015/11/SKM-100x100.jpg" class="avatar wp-post-image" alt="SKM Sinclair Knight Merz">

</a>
<p>Tim continues to provide high-level technical applications advice and support for a very challenging IP video application. He has shown he will go the extra mile to ensure all avenues are explored to identify an innovative and practical solution.<br>Tim manages to do this with a very helpful and professional attitude which is much appreciated.
</p>
</blockquote>

這是因為在那個長字符串中沒有空格，所以它必須從容器中出來。添加斷字:break-all；敬你的。標題規(guī)則強制中斷。

#calendar_container > #events_container > .event_block > .title {
    width:400px;
    font-size:12px;
    word-break:break-all;
}

body {
  font-family: arial;
  background-color: #ff8582;
  color: white;
}

#calendar_container {
  width: 400px;
  margin: 0px;
  padding: 0px;
}

#calendar_container>#events_container {
  width: 400px;
}

#calendar_container>#events_container>.event_block {
  width: 400px;
  padding-top: 1%;
  padding-bottom: 1%;
  background-color: #009;
}

#calendar_container>#events_container>.event_block>.title {
  width: 400px;
  font-size: 12px;
  word-break: break-all;
}

<div id="calendar_container">
  <div id="events_container">
    <div class="event_block">
      <div class="title">kjskjsfkjsfkjfkjdfkjdkfjdkfjjkdjfkdjfkdjfkdjfkdjfkdjfkdjfkdjfkdjfkdjfkdjfkdjfkdjfkdjfjdjdjdjd</div>
    </div>
  </div>
</div>

jsfiddle的問題是你的虛擬文本都是一個單詞。如果你使用了問題中給出的lorem ipsum，那么文本會自動換行。

如果你想讓大詞在中間斷開并換行，把這個添加到你的。標題css:

word-wrap: break-word;

這可能會幫助一小部分仍然摸不著頭腦的人。從剪貼板復制到VSCode的文本可能有一個不可見的硬空間字符，阻止換行。用HTML檢查器檢查它

可以加上這行:word-break:break-all；添加到您的CSS代碼

了解另一個選項可能對您有好處，即自動換行:斷字；

這里的區(qū)別是，可以完全放在一行中的單詞會這樣做，而不是僅僅因為單詞開始的那一行沒有空間而被迫換行。

參見小提琴的插圖http://jsfiddle.net/Jqkcp/