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    lt div id  calendar container  gt      lt div id  events container  gt           lt div class  event block  gt            lt div class  title  gt              lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem           lt  div gt         lt  div gt      lt  div gt   lt  div gt    Any help

User · Answer

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

User · Answer

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    lt blockquote class  testimonials-text  itemprop  reviewBody  gt    lt a href  http   www jacobs com   class  avatar-link  gt    lt 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  gt    lt  a gt   lt p gt 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  lt br gt Tim manages to do this with a very helpful and professional attitude which is much appreciated   lt  p gt   lt  blockquote gt

User · Answer

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

User · Answer

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  gt   events container  gt   event block  gt   title       width 400px      font-size 12px      word-break break-all      jsFiddle example

User · Answer

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

User · Answer

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

[css] Text not wrapping inside a div element

Examples related to css

Examples related to word-wrap

Examples related to htmltext