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?
http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx
Thanks
word-wrap:break-word not working in IE8
Asked Answered
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? –
Uncrown
@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. –
Ragen
@PaulDWaite I thought this was one of those things that was unprefixed in the beta and ended up prefixed in the release? –
Uncrown
I tried the prefixed and none prefixed version. And in their examples, it's actually not prefixed either. –
Ivie
Thanks guys, I came right in the end –
Ivie
If I recall correctly, word-wrap: break-word; is indeed supported in Internet Explorer 8, but the styled element must have layout.
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. –
Victorie 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! –
Carcajou 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.)
this is also needed for chrome –
Roister
thank you so much! I needed this to use word-wrap in a table cell for the orbeon renderer. –
Tver
just using of
table-layout: fixed is not enough. you need also use of width –
Truant 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;} –
Goings
Try this word-break: break-all; , for IE8 and IE9 it is working :)
Easy and effective...! –
Sightread
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. <div style="width: 222px; font: 14px sans-serif;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> –
Writer
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. –
Icarus
You can use
-ms-word-break: break-all;
Please add some additional explanation to your answer. –
Divulgate
MDN clearly states: > IE8 introduced -ms-word-break as a synonym for word-break. Don't use the -ms- prefix. –
Quieten
After looking at this example code from Microsoft:
https://msdn.microsoft.com/en-us/library/ms531186%28VS.85%29.aspx
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;
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. –
Donal
Unfair to vote this one down! At least it did work for me. A bad solution but a solution still. –
Incoherence
© 2022 - 2024 — McMap. All rights reserved.