Tekst nie zawijany wewnątrz elementu div

Question

Występuje problem, który nigdy wcześniej się nie zdarzał i wydaje się naprawdę bezprecedensowy, część tekstu nie jest zawijana wewnątrz elementu div.

W tym linku jest próbka mojego kodu 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> 

Każda pomoc ??

Answer 1

To dlatego, że nie ma spacji w tym długim sznurku, więc musi wyskoczyć z pojemnika. Dodaj word-break:break-all; do reguł .title, aby wymusić przerwę.

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

jsFiddle example

Answer 2

można dodać linię: word-break:break-all; do CSS-kodu

Answer 3

problemu w jsfiddle jest obojętne, czy tekst jest wszystko jedno słowo. Jeśli użyjesz lorem ipsum podanym w pytaniu, tekst zawinie się dobrze.

Jeśli chcesz dużych słów, aby być złamane w pół słowa i owinąć wokół, dodać do swojej .title CSS:

word-wrap: break-word; 

Answer 4

mogłyby odnieść korzyści, aby być świadomi inną opcją, word-wrap: break-word;

Różnica polega na tym, że słowa, które mogą całkowicie zmieścić się na 1 linii, będą to robić, zamiast być zmuszonym do zerwania, ponieważ nie ma więcej nieruchomości na linii, od której zaczyna się słowo.

Zobacz na skrzypcach dla ilustracji http://jsfiddle.net/Jqkcp/

Answer 5

znalazłem to pomogło, gdzie moje słowa zostały łamiąc część sposób przez słowa w plugin WooThemes referencje.

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

grać z nim tutaj 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>