How to make word-space-free words in a div or span so that all words are displayed in div width

Question

I have a problem to showing some space free words in a width limited div or span.

this is the sample code:

.abc {
  width: 200px;
  height: auto;
  min-height: 100px;
  background-color: blue
}


<div class="abc">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

and i want to show look like this:

http://oi64.tinypic.com/2mnqkco.jpg

thanks

Answer 1

Use:

word-wrap: break-word

In your box css.

Here's your code with it working:

<style>
    .abc{width: 200px;height: auto;min-height: 100px;background-color: blue; word-wrap: break-word}
</style>
<div class="abc">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

Answer 2

this line of CSS should do it for you:

.abc {
  overflow-wrap: break-word;
}

Or, add this after "background-color: blue"

;overflow-wrap: break-word

Answer 3

<div class="abc">
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>  


  .abc{
         width:200px;
          word-wrap: break-word;
        }