Text not wrapping inside a div element

CssWord WrapHtmltext

Css Problem Overview


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

Css Solutions


Solution 1 - Css

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>

Solution 2 - Css

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;
}

jsFiddle example

Solution 3 - Css

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;

Solution 4 - Css

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

Solution 5 - Css

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

Solution 6 - Css

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/

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionVasileios TsakalisView Question on Stackoverflow
Solution 1 - CssTimmyDView Answer on Stackoverflow
Solution 2 - Cssj08691View Answer on Stackoverflow
Solution 3 - CssMatt DalzellView Answer on Stackoverflow
Solution 4 - CssFakeerView Answer on Stackoverflow
Solution 5 - CssFriedrichView Answer on Stackoverflow
Solution 6 - CssSteamDevView Answer on Stackoverflow