word-wrap:break-word not working in IE8

Question

Can anyone please tell me why word-wrap: break-word will not work in IE8?

I have this working in other browsers but IE8 refuses to listen despite reading this post on their site?

Thanks

It says, right at the top of the page you linked to 'CSS { -ms-word-wrap : sWrap } ' Why are you expecting the unprefixed version to work? — robertc, Oct 22 '10 at 13:30
@robertc: I think the non-prefixed versions generally still work in IE 8? If they didn’t, a bunch of sites would have broken in IE 8. — Paul D. Waite, Oct 22 '10 at 13:37
@PaulDWaite I thought this was one of those things that was unprefixed in the beta and ended up prefixed in the release? — robertc, Oct 22 '10 at 13:45
I tried the prefixed and none prefixed version. And in their examples, it's actually not prefixed either. — Sixfoot Studio, Oct 22 '10 at 14:06

score 52 · Accepted Answer · answered Oct 22 '10 at 13:30

52

If I recall correctly, word-wrap: break-word; is indeed supported in Internet Explorer 8, but the styled element must have layout.

answered Oct 22 '10 at 13:30

Frédéric Hamidi

16

Yes. The page the OP linked says it right there: `This property applies to elements that have layout. An element has layout when it is absolutely positioned, is a block element, or is an inline element with a specified height or width.` – Matt Ball Oct 22 '10 at 13:56
Adding `display: inline-block;` to an element fixed an issue where `word-wrap:break-word;` would not trigger on IE8. Giving it a layout with `display: inline-block; solved this and works fine in all browsers. Highly important to have layout. Great link to read through in answer. Thank you! – lowtechsun Nov 06 '15 at 22:43

score 19 · Answer 2 · answered Jan 06 '11 at 19:36

19

I found that to apply word-wrap to a td (table cell) I needed to style the table element with table-layout: fixed. (IE8 standards mode.)

answered Jan 06 '11 at 19:36

Marc Stober

this is also needed for chrome – NimChimpsky Jan 07 '13 at 10:09
3

thank you so much! I needed this to use word-wrap in a table cell for the orbeon renderer. – Mido Feb 07 '13 at 03:23
just using of `table-layout: fixed` is not enough. you need also use of `width` – Shafizadeh Aug 14 '15 at 07:40
That's great, it maintains the integrity of the th witdhs. It works IE7+, Chrome, Mozilla, Safari. Can do something like the following, just give the table tag a class of "table-wrap": .table-wrap {table-layout: fixed;} .table-wrap tr td{word-wrap:break-word;} – Fi Horan Oct 26 '16 at 15:18

score 12 · Answer 3 · answered Jun 07 '13 at 07:27

12

Try this word-break: break-all; , for IE8 and IE9 it is working :)

answered Jun 07 '13 at 07:27

Satish Sharma

Easy and effective...! – JPCF Jul 20 '13 at 04:16
5

Just wanted to point out that "word-break" and "word-wrap" are two different things. In the following example, "word-break: break-all;" would cut the word "consectetuer" in half and "word-wrap: break-word" does not.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
– He Nrik Nov 04 '13 at 16:40
1

This really isn't the same thing. Break-all will break words in the middle even if it is not necessary. Break-word will only break a word if it will not fit on a line on its own. – Rudi Kershaw Apr 13 '16 at 13:00

score -1 · Answer 4 · answered Jun 20 '14 at 20:48

-1

You can use

-ms-word-break: break-all;

answered Jun 20 '14 at 20:48

Abhishek Mehta

Please add some additional explanation to your answer. – daniula Jun 20 '14 at 21:30
1

MDN clearly states: > IE8 introduced -ms-word-break as a synonym for word-break. Don't use the -ms- prefix. – FranBran Apr 22 '16 at 09:11

Magnus · Answer 5 · 2016-03-17T00:42:58.677

-1

I managed to fix my issues with IE-8 with the following addition to the document and header:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

...and then use this (official) CSS directive:

word-wrap: break-word;

edited Mar 17 '16 at 00:42

answered Mar 16 '16 at 17:08

Magnus

1

Seems very heavy handed. I don't think I'd recommend to anyone to make an app render with IE7's terrible rendering engine just for a word-break. Especially since this will make IE9 and up render as IE7. – StingeyB Aug 09 '16 at 19:12
Unfair to vote this one down! At least it did work for me. A bad solution but a solution still. – Magnus Aug 26 '16 at 10:12

5 Answers5