July 12, 2006

Word Wrapping in IE and Firefox

You will find other articles relevant to this document in these sections:
Richard Lee @ 6:15 pm

It’s a bit of a nightmare really. When a word is longer than its containing block-level element it tends to break out. Fortunately in IE 5.5 and above there’s the word-wrap:break-word porperty which can be used to break words longer than their respective containers.
Here’s an example using IE conditional comments:

 
<!--[if IE gt 5.0]
<style type="text/css">
.content{word-wrap:break-word;}
</style>
<![endif]-->
 

However there is no such property that will work in Firefox. So what to do? After a bit of head scratching I decided to have a look at using JavaScript. Although I am yet to come up with my own solution here it is in Spanish thanks to Mr El Micox :)

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • digg
  • Furl
  • Reddit
  • YahooMyWeb

9 Comments »

  1. Please be aware of the copying and pasting from this format, having a space between the < and the exclaimation mark will cause and error.

    Good snippet! great to make us aware of it!

    Comment by Cameron Manderson — July 12, 2006 @ 6:40 pm

  2. Thanks for picking that up Cam - spaces will kill it;). There’s still some quirks posting code in WordPress. Took me 3 attempts to even get the code displaying as it is!.

    So how’s your Spanish? lol.

    Comment by Richard Lee — July 13, 2006 @ 12:03 am

  3. Yes I have found it best to make the post and then goto phpmyadmin and physically change the contents of the post without the WYSIWYG editor. :-)

    Comment by Cameron Manderson — July 13, 2006 @ 10:29 am

  4. Beautiful! Seems the db edit is the best way to go… I really wonder what sort of “stripping” is going on in WP to cause it to break code snippets

    Comment by Richard Lee — July 13, 2006 @ 11:42 am

  5. Did you receive my anterior comment?

    Comment by Micox — August 31, 2006 @ 2:22 pm

  6. Sorry Micox what was the anterior comment?

    Comment by Richard Lee — August 31, 2006 @ 6:00 pm

  7. Hi, sorry. I see your reply just now.
    Sorry my bad english.

    The principal content of my previous comment that not appear, was:
    1) My blog/solution its not spanish, its PORTUGUESE. heheh

    2) To use my javascript solution, just apply the classname “word-wrap” on the “p” element to break it. (or change my script to support other tags). Its simple.

    3) Thanks to link my solution here. :)

    Comment by Micox — September 14, 2006 @ 1:01 am

  8. Now, english version here: http://elmicoxcodes.blogspot.com/2007/02/word-wrap-in-firefox.html

    Comment by Micox — February 9, 2007 @ 5:30 am

  9. Please, is there any solution in FF without JavaScript?

    Comment by peter — April 7, 2007 @ 2:01 am

RSS feed for comments on this post. TrackBack URI

Leave a comment