文本没有包装在div元素中

Question

我遇到了一个以前从未发生过的问题，看起来真的是前所未有的，有些文字并没有包含在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>

任何帮助??

Answer 1

我发现这有助于我的话在WooThemes见证插件中突破了这个词。

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

在这里玩http://nortronics.com.au/recomendations/

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

<a href="http://www.jacobs.com/" 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>

Answer 2

那是因为那个长字符串中没有空格所以它必须突破它的容器。将word-break:break-all;添加到.title规则中以强制休息。

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

<强> jsFiddle example

Answer 3

您可以将此行：word-break:break-all;添加到您的CSS代码

Answer 4

jsfiddle中的问题是你的虚拟文本都是一个单词。如果您使用问题中给出的lorem ipsum，则文本包装正确。

如果你想要在单词和单词中打破大词，请将其添加到.title css中：

word-wrap: break-word;

Answer 5

这可能会帮助一小部分仍然挠头的人。从剪贴板复制到VSCode的文本可能具有不可见的硬空格字符，从而无法换行。用HTML检查器检查它

Answer 6

可能会让您了解另一个选项word-wrap: break-word;

这里的区别在于，完全适合1行的单词会这样做，而不是因为单词开头就没有更多的不动产而被迫中断。

请参阅小提琴，了解插图http://jsfiddle.net/Jqkcp/