Il testo non si avvolge all'interno di un elemento div

Question

Sto riscontrando un problema che non è mai accaduto prima e sembra davvero senza precedenti, alcuni testi non sono inclusi in un div.

In questo link è un campione del mio codice 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> 

Qualsiasi aiuto ??

Answer 1

Questo perché non ci sono spazi in quella lunga stringa, quindi deve uscire dal suo contenitore. Aggiungi word-break:break-all; alle tue regole .title per forzare un'interruzione.

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

jsFiddle example

Answer 2

è possibile aggiungere questa riga: word-break:break-all; al CSS-codice

Answer 3

Il problema nel jsfiddle è che il testo fittizio è tutto una sola parola. Se usi il tuo lorem ipsum indicato nella domanda, allora il testo si chiude bene.

Se si vuole grandi parole per essere rotto a metà parola e avvolgere intorno, aggiungere questo al vostro .title css:

word-wrap: break-word; 

Answer 4

possono beneficiare di voi di essere a conoscenza di un'altra opzione, word-wrap: break-word;

Il la differenza qui è che le parole che possono essere completamente adattate su 1 linea lo faranno, contro l'essere costretti a rompere semplicemente perché non c'è più un immobile sulla linea in cui inizia la parola.

Vedere il violino per un'illustrazione http://jsfiddle.net/Jqkcp/

Answer 5

ho trovato questo ha aiutato dove le mie parole sono state rompendo in parte attraverso la parola in un plugin WooThemes Testimonianza.

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

giocare con lui qui 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>