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

Question

I have a small css script that force <a> tag word-wrap in a div. It worked fine on FF, Chrome but didn't work on IE9. How can I fix it?

.tab_title a{
    word-wrap: break-word;
}

The solution in this post worked for me: [http://stackoverflow.com/a/36042412/2383765](http://stackoverflow.com/a/36042412/2383765) — Magnus, Mar 16 '16 at 18:36

score 29 · Answer 1 · answered Jun 08 '15 at 09:38

For a similar issue, I used display: inline-block on the <a> tag, which seems to help. And word-break: break-all as I was concerned with long URLs not wrapping.

So, this in your case essentially...

.tab_title a {
    display: inline-block;
    word-break: break-all;
}

score 17 · Answer 2 · edited Aug 11 '18 at 21:01

17

For me it worked in both Chrome and IE with:

.word-hyphen-break {
  word-break: break-word;
  word-wrap: break-word;
  width: 100%;
}

like this no need to configure specific width.

edited Aug 11 '18 at 21:01

georgeawg

48,608
13
72
95

answered Aug 11 '18 at 20:43

anniete

191
1
4

score 13 · Answer 3 · edited Jun 27 '13 at 07:36

13

This might do the trick: http://www.last-child.com/word-wrapping-for-internet-explorer/

Another post also suggests applying word-break:break-all and word-wrap:break-word to it.

edited Jun 27 '13 at 07:36

RAS

8,100
16
64
86

answered Dec 06 '11 at 02:39

Duke Hall

582
4
12

like this link suggested "word-break: break-all" does the job! Thanks. – ZeeProgrammer Jan 05 '18 at 15:48

score 8 · Answer 4 · answered Jul 31 '15 at 13:54

8

Try this:

.tab_title a{
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

answered Jul 31 '15 at 13:54

Danny Connell

782
1
8
18

That approach does not work with display flex, I changed the element to display block and worked just fine. – yanioconjota Feb 19 '19 at 12:40

score 4 · Accepted Answer · edited Jun 16 '15 at 21:25

4

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

edited Jun 16 '15 at 21:25

Thanigainathan

1,505
14
25

answered Dec 06 '11 at 02:59

hungneox

9,333
12
49
66

.tab_title{ word-wrap: break-word; } .tab_title a{ word-break: break-word; } – Stephanie May 24 '21 at 16:07

score 3 · Answer 6 · edited Mar 07 '13 at 16:40

3

word-wrap: word-break; works only in ff and chrome and not in IE8 and IE9.
word-break: break-all; does not work either.

edited Mar 07 '13 at 16:40

Anri

6,175
3
37
61

answered Mar 07 '13 at 16:21

Prachi

31
1

score 3 · Answer 7 · answered Apr 28 '17 at 18:34

3

I have had good success in Chrome, Firefox and IE with using:

word-break: break-word;
word-wrap: break-word;

In my problem case I was using:

display: table-cell;

and I ended up having to include

max-width: 440px;

to get wrapping in all browsers. In most cases the max-width was not necessary. Using

word-break: break-all;

does not work well in IE because although long words without spaces will be wrapped, short words also stop wrapping at spaces.

answered Apr 28 '17 at 18:34

Darren Reimer

741
8
9

fyi, I also had the same issue with IE11. I got it to wrap big words in my table, but it seems to wrap tiny words as well, when it could have easily put it into a separate line. I'm glad I'm not the only one. Did using max-width fix it for you? I just tried it on my TD, but no luck. – NL3294 Feb 06 '18 at 01:13
Yes, in most cases: word-break: break-word; word-wrap: break-word; worked, but in the one case that it didn't, also specifying max-width did the trick. – Darren Reimer Feb 08 '18 at 15:40

score 0 · Answer 8 · answered Jun 01 '17 at 14:40

I recently was fighting this in Angular between IE/Edge & Chrome. Here is what I found worked for me

  overflow-wrap: break-word;
  word-wrap: break-word;

This gave me the best of both. It would break the word that was too long, but unlike word-break it would not break mid-word.

score -1 · Answer 9 · answered Mar 07 '13 at 23:07

i just figured out that word-wrap:break-word works only partially in IE8 and IE9. If I have a string of words with spaces, then that string gets wrapped. But if my string consists of one long word, it forces the parent/container element to expand according to its width

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

9 Answers9

Linked