Word-Wrap Does Not Work in Ie

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 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-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; 

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.

Word break doesn't work in FF and IE

Actually word-wrap: break-word; isn't always the good solution while breaking overflowing sentences. As it breaks the words of the sentence which remove the actual meaning of the word OR better to say make it unreadable.

So while using word-wrap: break-word; try considering white-space: pre-wrap; which only breaks the sentence the meaningfully that means the word accessibility can break into

access
ibility

but if we use white-space: pre-wrap; it will always give you

accessibility

Here I've created a JSFiddle.

p {word-wrap: break-word; white-space: pre-wrap;}

Hope it will work for you.

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.

---

Related Topics