[css] Text not wrapping inside a div element

I am experiencing a problem that never happened before and seems really unprecedented, some text is not wrapping inside a div.

In this link is a sample of my 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>

Any help??

This question is related to css word-wrap htmltext

The answer is


Might benefit you to be aware of another option, word-wrap: break-word;

The difference here is that words that can completely fit on 1 line will do that, vs. being forced to break simply because there is no more real estate on the line the word starts on.

See the fiddle for an illustration http://jsfiddle.net/Jqkcp/


you can add this line: word-break:break-all; to your CSS-code


This may help a small percentage of people still scratching their heads. Text copied from clipboard into VSCode may have an invisible hard space character preventing wrapping. Check it with HTML inspector

string with hard spaces


The problem in the jsfiddle is that your dummy text is all one word. If you use your lorem ipsum given in the question, then the text wraps fine.

If you want large words to be broken mid-word and wrap around, add this to your .title css:

word-wrap: break-word;

I found this helped where my words were breaking part way through the word in a WooThemes Testimonial plugin.

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

play with it here 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>