Simple Is Good!

How To Web Dev

CSS word-wrap

Was working on a project the other day and ran into an issue with users submitting links that were painfully long, so long in fact that they would extend past their container and spill over on top of other things. Quite frustrating because there isn’t a whole lot a developer can do about this, or so I thought. Introducing (it was new to me at least) the word-wrap property in css.  What it does is forces a line to text that has no spaces or breaks in it to wrap as though it did.  Here is an example of it happening

here is some text that is going to break the layout of this div. This div is only 200px wide. Not wide enough to contain this text
this_is_some_really_really_way_to_long_text_this_is_some_really_really_way_to_long_text_
So now you see the problem we are running into, lets look at the solution
<div style="width: 200px; border: 1px solid black;">
  here is some text that is going to break the layout of this div. 
  This div is only 200px wide.  Not wide enough to contain this text
  this_is_some_really_really_way_to_long_text_this_is_some_really_really_way_to_long_text_
  So now you see the problem we are running into, lets look at the solution
</div>

The Solution

This is where word-wrap comes into play. The word-wrap property can be set to two different values, first is normal, which is default, and secondly there is break-word which forces text to break even if there is no space.  So lets try is out and see what happens.

.wrap {
     word-wrap: break-word;
}
here is some text that is going to break the layout of this div. This div is only 200px wide. Not wide enough to contain this text
this_is_some_really_really_way_to_long_text_this_is_some_really_really_way_to_long_text_
So now you see the problem we are running into, lets look at the solution
<div style="width: 200px; border: 1px solid black;" class="wrap">
  here is some text that is going to break the layout of this div.  
  This div is only 200px wide.  Not wide enough to contain this text
  this_is_some_really_really_way_to_long_text_this_is_some_really_really_way_to_long_text_
  So now you see the problem we are running into, lets look at the solution
</div>

February 17, 2011 at 8:00 am | CSS, Design | No comment

Leave a Reply

Your email address will not be published. Required fields are marked *