Text, der nicht in ein div-Element eingebettet ist

Question

Ich habe ein Problem, das noch nie zuvor aufgetreten ist und scheint wirklich beispiellos zu sein, einige Texte sind nicht in einem Div.

In dieser Verbindung ist eine Probe meines HTML-Code:

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> 

Jede Hilfe ??

Answer 1

Das liegt daran, dass in dieser langen Zeichenfolge keine Leerzeichen enthalten sind, sodass sie aus dem Container ausbrechen muss. Fügen Sie Ihren .title-Regeln word-break:break-all; hinzu, um eine Unterbrechung zu erzwingen.

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

jsFiddle example

Answer 2

Sie diese Zeile hinzufügen: word-break:break-all; zu Ihrem CSS-Code

Answer 3

Das Problem in der jsfiddle ist, dass Ihr Blindtext alles Wort ist. Wenn Sie Ihren Lorem Ipsum in der Frage verwenden, wird der Text gut umbrochen.

Wenn Sie große Worte wollen Mitte Wort gebrochen werden und Wrap-around, fügen Sie diese zu Ihrer .title css:

word-wrap: break-word; 

Answer 4

könnten Sie bewusst eine andere Option sein profitieren, word-wrap: break-word;

Die Unterschied hier ist, dass Wörter, die vollständig auf 1 Zeile passen können, dies tun, gegen gezwungen werden zu brechen, einfach weil es keine weitere Immobilie auf der Linie gibt, die das Wort beginnt.

Siehe die Geige für eine Illustration http://jsfiddle.net/Jqkcp/

Answer 5

Ich fand dies half, wo wurden meine Worte teilweise durch das Wort in einer WooThemes Testimonial-Plugin zu brechen.

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

mit ihm spielen hier 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>