Forcing Long Strings and URLs to Wrap with CSS

November 10th, 2010 - Posted by Steve Marks to (X)HTML / CSS, Web Development.

Forcing Long Strings to Wrap in CSS

Ever tried to squeeze a long word with no spaces or a URL into a small area? If so you may notice that different browsers deal with this differently. Let me give you a quick example:


<div style="width:150px; border:2px solid #900;">

Internet Explorer:

Without Word Wrap in Internet Explorer


Without Word Wrap in Chrome


Without Word Wrap in Firefox

Firefox treats the scenario as you’d expect. IE and Chrome however are reluctant to break up the string so that it fits into our container nicely.

The CSS Solution – word-wrap:break-word

By introducing a ‘word-wrap:break-word’ CSS style to the equation we can tell the browser to break up words if required. I’ve included below the updated code and how it should now look across the different browsers:

<div style="width:150px; border:2px solid #900; word-wrap:break-word;">

Internet Explorer:

With Word Wrap in Internet Explorer


With Word Wrap in Chrome


With Word Wrap in Firefox

This entry was posted on Wednesday, November 10th, 2010 at 8:19 pm by +Steve Marks and is filed under (X)HTML / CSS, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first