2/16/2007

FIREFOX / IE Word-Wrap, Word-Break, TABLES FIX





One of the most annoying things a developer (who would normally delight in writing code, not futzing with markup) can have is getting rendering issues between different browsers. The two biggest players are of course Internet Exploder and Firefart (as I lovingly like to refer to each). In most cases that's going to take care of 98 percent of your total site traffic.

IE has had a proprietary "word-break" style attribute for a long time, and this made it into the CSS 3.0 spec. But that doesn't necessarily help you with Firefox right now. Firefox literally - (and I consider this completely idiotic, since it's been in their bug database for FIVE YEARS) does not have a reliable CSS style element to force table cell content to break in the middle of a word in order to stop the content from expanding your table / div off the page or over other content on the page. Here's a partial fix, which will work for most tables and browsers. The style declaration (I call it my HardBreak class):

<style>

/* this will force a column to be no wider than 300px,

breaking words in the middle of a long word if necessary. */

.HardBreak

{
width: 300px;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */

}
</style>

You could also replace the .HardBreak class designator above with
td
{

and the style would automatically apply to all TD elements. Remove the width attribute in that case, and set the width in the TD element itself.

The only issue I found with this is that if you want a table column to observe your stated width, you must apply this class to EVERY CELL IN THE COLUMN. Otherwise, it seems to behave nicely in IE, Firefox, and Opera. Also, you may need to remove or comment - out the "white-space" elements in the style, as they can mess up the rendering of lines in Mozilla browsers. I've left them in here, however.

This will force long urls (for example) that have no spaces in them to wrap to the specified width automatically (even breaking in the middle of a word) and not throw the widths of your tables or divs all to hell.

Really, this kind of immature crap from the browser manufacturers has to stop. It ain't rocket science to all get together and agree on CSS handling that works with everybody's product. Forget about the rivalry - what about the damned consumer! And please don't hand me this "Get Firefox, IE sucks" crap. In this case, IE has a working CSS property and Firefox didn't implement it, because it didn't make it into the CSS 2.0 spec - even though its been in their bug database forever. Fortunately, the IE-specific element made it into CSS 3.0 - but you purists will still have to wait.

49 comments:

  1. Hey thanks for the tip Peter! I was getting really annoyed with this chinese text which I had to fit into a table.

    ReplyDelete
  2. Anonymous4:54 PM

    This isn't working for me in firefox 2.0.0.2

    Here is my code,
    [style]
    .td
    {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    white-space: pre;
    white-space: -hp-pre-wrap; /* HP Printers */
    white-space: pre-line;
    }
    [/style]
    [table style="width: 780px; table-layout: fixed;"]
    [tr]
    [td style="width: 750px%;"]
    [c:out value="${actionBean.memo.formattedComments}" /]
    [/td]
    [/tr]
    [/table]

    ReplyDelete
  3. I have the opposite problem.

    I want the table cell to render exactly as I specify, sorta like a spreadsheet, only each cell has multiple lines. It works on Firefox, but on IE when I exceed the screen width, suddenly IE starts breaking the line where the spaces are, even when I set style.whiteSpace="pre" for every %$#! cell!

    I'm setting the innerHTML directly, e.g. cell.innerHTML="X Y Z[BR]1 2 3[BR]x". (replaced angle brackets with braces) If I enclose it with pre tags, suddenly it doesn't break any more, but it instead adds a margin around the cell that I can't seem to get rid of.

    ReplyDelete
  4. Thanks Peter! It has saved my template from being rendered useless! I will be linking your tip on my webiste, as online no one else has suggested a working solution. Time for bed now, I'd thought I be up all night with this!

    ReplyDelete
  5. Anonymous12:03 AM

    You know what's even more fun? The fact that Firefox properly understands plain old html pre word-wrap, but IE doesn't...

    [pre style="white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-
    pre-wrap; white-space: pre-wrap; word-wrap: break-word;"]

    ReplyDelete
  6. Thanx thanx thanx!!! Great solution! It saved me from hours of useless work.

    ReplyDelete
  7. Anonymous12:16 PM

    Everyone says IE sucks because it does. Not implementing a NON STANDARD css property is not even in the same universe as building a browser that completely incorrectly implements DOZENS of properties. Not even to mention the several dozen very well documented rendering bugs (double margin float bug for example). IE makes web developers jobs way more painful than it ever needed to be.

    ReplyDelete
  8. Here's a article on how IE doesn't bother to implement CSS standards.
    http://www.idealog.us/2006/08/microsoft_drops.html

    Keep in mind, it might not be in their best economic interests to go with the standards, hey it probably makes more sense to MAKE their own standards and force others into complying (just because they have like ~90% market share), but i'm happy to see more competition on the browser front - monopoly can't be a good thing for the customer..

    ReplyDelete
  9. My link got scrambled, here it is again:
    Idealog

    ReplyDelete
  10. Anonymous3:34 PM

    This isn't working for me in Firefox 2.0.0.6. Can anyone enlighten me on what I am doing wrong?

    [html]
    [head]
    [style]

    /* this will force a column to be no wider than 300px,
    breaking words in the middle of a long word if necessary. */
    .HardBreak
    {
    width: 200px;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    }
    [/style]
    [/head]

    [body]
    [table border="1"]
    [tr]
    [td class="HardBreak"]When in the course of human events...HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello[/td]
    [td]test[/td]
    [/tr]

    [/table]
    [/body]

    [/html]

    ReplyDelete
  11. I tested the trivial table example, and it fails on:

    * Firefox 2.0.0.7
    * Opera 9.23
    * Safari 3.0.3 for Windows

    It works on:

    * IE 6
    * IE 7

    Could you please post a working HTML example?

    ReplyDelete
  12. Anonymous2:29 PM

    I am using the same CSS for word-wrap in PRE element. It works perfectly in Windows-IE,Firefox,Netscape. But i am having big problem in Mac OS Safari browser. The pre-wrap is not working in Safari Browser. But it works in Mac OS firefox browser...
    Any one has solution for Safari browser pre-wrap issue?

    ReplyDelete
  13. Thanks A LOT Peter! After ages of searching for word breaks on Firefox I finally found a solution that works on ALL the major browsers :D

    ReplyDelete
  14. Anonymous12:31 AM

    Thanks a million, Peter. I found a bunch of "half-solutions," out there, but yours fixed my table problem 100%

    Cheers,

    Darren

    ReplyDelete
  15. Anonymous1:52 PM

    DOES NOT WORK IN LATEST VERSION OF FIREFOX!

    ReplyDelete
  16. try adding:
    overflow-x:auto;

    This will give you a scrollbar, but at least it won't overflow the defined width.

    ReplyDelete
  17. Tim Erwin5:15 PM

    Here is mine (kidding)

    .td
    {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    white-space: pre;
    white-space: -hp-pre-wrap; /* HP Printers */
    white-space: pre-line;

    // Pizza Browser
    pepperoni-space: no-!233space;

    // Car Browser
    brown-space : asdopasod

    // CarX Browser
    soupedup-space: aso))233

    }

    Please......

    ReplyDelete
  18. Not working in Firefox 3 for me. Any ideas?

    ReplyDelete
  19. Anonymous3:50 PM

    I actually don't have this problem in latest FF3 on the site I'm working on but I can't seem to find a fix for this problem in FF2. I'm scared to see what IE does to this.

    ReplyDelete
  20. Anonymous11:08 AM

    guys in firefox 3.0.1 this dosent work why ?

    Only with overflow-auto we can have some result but the sily scrolling bar then appears and seems so ungly :((

    the strange is that in MS Interet explorer 7 works !? how its possible and dosent work in FX 3.0.1 ???

    please give some solution !

    ReplyDelete
  21. Hi Peter

    The simple exemple given by eric short doesn't work on a 2.0.0.16 firefox.


    I've added the overflow-x instead.

    ReplyDelete
  22. Hi there,

    you may find the following blog entry relevant:
    http://blog.stchur.com/2007/03/01/word-wrap-for-mozilla-take-2/

    It provides an elegant fix for mozilla.

    ReplyDelete
  23. Anonymous7:01 AM

    Thanks! This really solved the problem that I was having with my solution! Million, billion thanks to you :)

    ReplyDelete
  24. Anonymous1:10 PM

    Hi, it works with fixed width like 200px, but not working with relative width like 30%.

    Any more hint with relative width?

    Thanks

    ReplyDelete
  25. great diatribe, and good code, too. Ty

    ReplyDelete
  26. Why are you still using tables for layout and not tabular data..... ?????

    good tip though..

    ReplyDelete
  27. @Kenneth,
    Sometimes you have to work with OPC - "other people's code" and you don't have the luxury of updating it.

    ReplyDelete
  28. Anonymous12:06 PM

    I got stuck on this, so I went to https://www.surefirehire.com and hired a css expert freelancers.

    It got a resolution super fast, and it only cost me $10 to hire someone to do it.

    ReplyDelete
  29. the fix i came across (to add onto yours) is to also add this property:


    word-break: break-all;


    seems to do the trick... try it out

    ReplyDelete
  30. Anonymous4:49 PM

    Fails on FF3. Actually works great on IE. Say what you want on IE, some of their non standard extensions are great. This is a case where IE never breaks the layout because of wrapping, and we were using it for a long time.

    FF on the other hand does not have a solution that I am aware of for this very trivial need (the code in this blog post does not work for me and others).

    ReplyDelete
  31. Maybe it fails cause you copy/pasted all the rules in the CSS. When a browser sees multiple rules with the same name, the last one wins.

    What you must do is ensure that the relevant rules apply only to the relevant browsers.

    ReplyDelete
  32. Anonymous4:19 PM

    Incase you don't know, Firefox FINALLY implemented this. Now you can simply use "word-wrap: break-word";

    Tested Firefox 3.5 or above

    ReplyDelete
  33. Anonymous8:14 AM

    as long as you got php, i suggest just using the function wordwrap. much more convenient, although not scalable.

    ReplyDelete
  34. Anonymous9:24 AM

    Works fine in Firefox and IE, but fails in Opera 9.6 for me.

    ReplyDelete
  35. Use:

    word-wrap: break-word;
    display:block


    http://www.biagioni.com.br

    ReplyDelete
  36. wackowizzard6:24 AM

    I use :
    (works in IE6 & Firefox, not tested in other)


    CSS :

    td.col_text{
    word-break: break-all;
    }
    span.wordwrap{
    display: inline-block;
    }


    HTML / PHP :
    ...
    [td class="col_text"]


    [/td]
    ...

    ReplyDelete
  37. Dude
    word-wrap: break-word;

    with

    overflow:auto did the job...

    Cool many thanks ..!!!

    ReplyDelete
  38. Anonymous8:46 AM

    Time flies over but your tip is always acurate and essential
    thanks again
    JP

    ReplyDelete
  39. I have just encountered the problem. In latest versions of Firefox 3.6 / 4 beta, it works with
    white-space: pre-wrap;
    https://developer.mozilla.org/En/CSS/white-space

    ReplyDelete
  40. Help!!!! Firefox, Safari, Chrome white-space:pre stop working after using innerHTML to change the HTML content.

    ReplyDelete
  41. Help!!!! Firefox, Safari, Chrome white-space:pre stop working after using innerHTML to change the HTML content.

    ReplyDelete
  42. I try everything but in tables with width in %, the width of the td with big text, always is larger than i defined. I am using IE8.

    ReplyDelete
  43. The word-wrap: break word does work well but has to be used in a div and with width set in CSS also.

    div style='word-wrap: break-word; width: 200px;'blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaahhhhhhhhhhhhhh!!!!!!/div

    ReplyDelete
  44. This css work fine with all browsers. If it is not working for your table, you need to set "table-layout" property to "fixed".

    ReplyDelete
  45. Thanks for the css class. It works with all browsers. If it is not working, you need to set "table-layout" to "fixed".

    ReplyDelete
  46. Anonymous8:05 AM

    use float:lefet; with word-wrap:break-word; to work in fire fox

    ReplyDelete
  47. Vikash Tiwari's solution worked in FF4 and Chrome 11 for me! I applied the style to my table element. Thanks!

    ReplyDelete
  48. This partially worked. In FF5 & 6 I had to add a "max-width" property and then the words would break.

    Thanks :)

    ReplyDelete
  49. Great solution. Thank's a bunch!!!!

    ReplyDelete