Text not wrapping inside a div element

Question

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??

Answer 1

That's because there are no spaces in that long string so it has to break out of its container. Add word-break:break-all; to your .title rules to force a break.

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

body {
  font-family: arial;
  background-color: #ff8582;
  color: white;
}

#calendar_container {
  width: 400px;
  margin: 0px;
  padding: 0px;
}

#calendar_container>#events_container {
  width: 400px;
}

#calendar_container>#events_container>.event_block {
  width: 400px;
  padding-top: 1%;
  padding-bottom: 1%;
  background-color: #009;
}

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

<div id="calendar_container">
  <div id="events_container">
    <div class="event_block">
      <div class="title">kjskjsfkjsfkjfkjdfkjdkfjdkfjjkdjfkdjfkdjfkdjfkdjfkdjfkdjfkdjfkdjfkdjfkdjfkdjfkdjfkdjfjdjdjdjd</div>
    </div>
  </div>
</div>