How to wrap text in a element in IE

Question

As <a> elements often contain long URLs with various tokens, this often breaks out of the outer container the link is in.

To prevent this, there are the CSS properties word-wrap, word-break and -ms-word-break(for earlier versions of IE). However, I couldn't get those working in IE (tried with IE11).

Here is the Fiddle Demo.

How can I make content of a <a> element automatically wrap inside of it's outer container in IE11?

You should first ask the questions “Should I really have URLs as web page content?” (rather than in attributes) and “If I should, what are the permissible line break points within a URL?”. The question as currently asked seems to imply that any break is OK, but this is not true. — Jukka K. Korpela, Feb 02 '14 at 20:06
As users can freely decide what they put in as -content, I cannot change this. Also, I would feel that any break point within a URL is okay. Do you think otherwise? — Zulakis, Feb 02 '14 at 20:16
You can filter out content, or otherwise process it. And all the relevant authorities, such as the IETF (STD 66) and The Chicago Manual of Style, say that URLs must not be broken arbitrarily (though they may have different views on acceptable break points. — Jukka K. Korpela, Feb 02 '14 at 21:17

score 2 · Accepted Answer · edited Feb 02 '14 at 21:18

2

The link should have following styles to wrap properly:

a {
    word-wrap:wrap-word;
    word-break:break-all;
    display:inline-block; /* block would also work */
}

edited Feb 02 '14 at 21:18

Hashem Qolami

97,268
26
150
164

answered Feb 02 '14 at 20:07

alexej_d

450
5
13

This seems to work, thank you. Does using `display:inline-block` have any downsides? – Zulakis Feb 02 '14 at 20:22
It has only limited support below IE8 which should not be of any relevance [see here](http://caniuse.com/inline-block) – alexej_d Feb 02 '14 at 21:47

score 1 · Answer 2 · edited May 23 '17 at 12:28

1

This is actually getting interesting.

First, I asked myself: "Could it be a hasLayout issue?" (An old related issue)

Hence I made a test on JSBin, and checked the result on IE8 (Windows7).

But I faced an strange behavior.

In that Demo, word-wrap: break-word; doesn't work properly on an inline element such as <a> tag. But if you set that on the parent (<div> element) it works!

While the MSDN states that this property will be applied to all elements.

Once you change display property of that inline element to block it would work without error.

On the other hand, There's a same situation for using word-break: break-all; on an inline element; it won't work.

But when we change the display property of the element to inline-block or block, it works well.

I don't exactly know why this happens. (In my knowledge) The spec doesn't stated anything about this.

But if those two CSS declarations are set on the container, they'll work on different web browsers (IE as well):

div {  /* <-- the container */
  word-wrap:break-word;
  word-break:break-all;
  /* other styles... */
}

edited May 23 '17 at 12:28

Community

1
1

answered Feb 02 '14 at 21:13

Hashem Qolami

97,268
26
150
164

As this should only be applied to links (other text in the container must be wrapped normally), I cannot set it on the container. Quite interesting that MSDN states that it is applied on all elements when it obviously is not. Are there any downsides of using `display:inline-block`? – Zulakis Feb 02 '14 at 21:39
Not at all, If you don't care about IE 6/7 :) – Hashem Qolami Feb 02 '14 at 21:40
1

@Zulakis I should improve my comment: By default, IE5.5-7 only supports [`inline-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility) on naturally *inline* elements. In this case it would work properly. – Hashem Qolami Feb 02 '14 at 21:59

How to wrap text in a element in IE

2 Answers2