1

I have a table that is dynamically built based on user input--that is, the user enters the data in the table, and determines how many fields are on a row, etc. Thus, I have no control over the length of the data, and limited control of the layout. I've still managed to build something that works pretty well in FF, Chrome, Safari, but I'm running into an annoying problem in IE8 and IE9. I include the following css for the table cells in question:

td.dc {
    white-space:normal;
    -ms-word-wrap: break-word;
    max-width: 80em;
}

IE ignores all 3 of those tags, and continues for the whole length of the line. If I wrap the contents of the cell in a div and apply the css to the div, it works in IE9, but still not in IE8. In IE8, the text does in fact wrap after 80 em, but the cell is still rendered wide enough to fit the unwrapped line, so everything else in the table is pushed over. Is there any way around this?

[EDIT] I created a jsfiddle to illustrate the particular case that's breaking: http://jsfiddle.net/qz3rv/3/ I've realized (what wasn't clear from the bug report) is that only certain cases seem broken--perhaps having to do with / in the data.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Julie Sheffield
  • 145
  • 2
  • 9
  • Don't use `-ms-word-wrap` unless you specificaly want to target IE 8+. Use unprefixed `word-wrap`. – Pavlo Sep 18 '12 at 17:38
  • Also have a look at [this question](http://stackoverflow.com/questions/1258416/word-wrap-in-a-html-table). You may want to use something like `table { table‑layout: fixed; width: 30em; }`. – Pavlo Sep 18 '12 at 20:09
  • I am specifically targeting IE8+, which is why I used the prefix. white-space:normal behaves the way I want in other browsers. Unfortunately, I can't use table-layout:fixed because the layout is determined by the users: they choose how many fields to include on the same row and they determine the content (and therefore length) of the fields. – Julie Sheffield Sep 19 '12 at 15:54
  • I use the prefix because I only want this to apply in IE. I don't really want to break words--I just can't get it to break even between words in certain cases like the one I illustrated in the jsfiddle. I can't use table-layout:fixed because the user determines the size and number of columns. – Julie Sheffield Sep 19 '12 at 16:25

1 Answers1

1

The code posted works on IE in Standards Mode, when tested in a minimal HTML environment. So apparently your code runs in Quirks Mode. So try adding <!doctype html> at the very start of the HTML file.

Consider using a value essentially smaller than 80em for testing, and otherwise. Note that white-space:normal just re-affirms the default and that -ms-word-wrap: break-word and its standard counterparts mean breaking words (violating normal writing rules) in certain exceptional rules and should be avoided.

Also note that table column widths are a tricky business, and to describe a specific problem with it, you should show the table markup and associated CSS.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • For my IE 9, it doesn't break anything (check [jsfiddle](http://jsfiddle.net/GMTqY/2/), doctype is specified). – Pavlo Sep 18 '12 at 17:27
  • Check out this fiddle in IE8: http://jsfiddle.net/qz3rv/1/ The first example also doesn't wrap in IE9, but I admit, I'm using spoon.net to test in IE9, not an actual IE9 browser (I don't want to upgrade my IE8 because then I can't go back and unfortunately we still have to support it for about 30% of our users). – Julie Sheffield Sep 19 '12 at 16:11
  • Oh, also, my doctype is already the "skinny" version: Not sure how to set that exactly in jsfiddle, but that's the doctype of the actual site where it's broken. – Julie Sheffield Sep 19 '12 at 16:21
  • 1
    When you set `max-width` on a `td` (as opposite to an element inside `td`), browsers behave differently in column width allocation. But it does not look like content that should be handled this way in the first place; if the content is URLs or path names of files and they need to be that way, then they should be divided into lines at reasonable break points. If you do that by inserting `` or zero-width spaces, the content will start behaving like normal text, more or less, and the problem probably disappears. – Jukka K. Korpela Sep 19 '12 at 16:47