Word-Wrap:Break-Word Not Working in IE8

word-wrap:break-word not working in IE8

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

Word-wrap not working in Internet Explorer

you need to have

table {
    width:100%;
    table-layout:fixed;
}

and put word-wrap in table,td,th not into span

http://jsfiddle.net/d6VsD/7/

word-break css not working in IE8

What ended up working for me was setting the span to have a display of inline-block.

word-wrap:break-word not working as expected in IE8

Practically speaking, I would not worry about word wrapping for such contrived text as sighted in your example (where there no white space).

Said that, one of the solution could be to wrap the content inside a div and apply width & word-wrap to the div. See this fiddle for example: http://jsfiddle.net/6Cm3U/1/

CSS word-wrap: break-word don't work on IE9

I remove the anchor tag after .tab_title class and it works

word-break: break-word not working in Firefox and IE

While I do believe you don't need display: flex in .item, the following will work across browsers:

.item {
  display: flex;
  flex-direction: column;
  width: 33vw;
  word-break: break-word; /* Chrome, Safari */
  word-wrap: break-word; /* IE11, Firefox */
}

Why does this work?

It would be naive to simply say that flex-direction: column forces the flex block to respect the element's width. The explanation is far more complicated, I hope some CSS guru could shed some light on this one.

Internet Explorer 11 word wrap is not working

In order to ensure that the answer is obvious to people visiting this question in the future: the OP (wesley) answered the question himself in the comments beneath the question:

The cause of the problem is that Internet Explorer 11 makes textarea elements inherit whatever white-space property is applied to the direct parent.

The resolution is to apply white-space: pre-wrap to the textarea, as identified by Jean-François Beauchamp.

word-wrap does not work in IE

As word-wrap is a CSS3 property, it is only supported by IE9 and higher. For IE8 try

-ms-word-wrap

So try

div.break_word {
    width: 690px;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
}

Hope this helps.

Update

It seems that even if you use -ms-word-wrap in IE7, it defaults the white-space: nowrap; which then overrides the word-wrap property.

Once again a IE hack is required. Try adding this for IE7.

white-space: normal; 

---

Related Topics