css - 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 Testimonial プラグインの単語の途中で私の単語が途切れるのに役立つことがわかりました。

.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 の例

Answer 3

jsfiddle の問題は、ダミー テキストがすべて 1 つの単語であることです。質問で指定された lorem ipsum を使用すると、テキストはうまく折り返されます。

大きな単語を単語の途中で分割して折り返したい場合は、これを .title css に追加します。

word-wrap: break-word;

Answer 4

次の行を追加できword-break:break-all;ます：CSSコードに