I added overflow-wrap: break-word to my css file to support long string.
Does anyone know how to enhance browser compatibility?
Asked
Active
Viewed 152 times
1
haeminish
- 988
- 5
- 15
- 29
-
1`word-wrap` - [take a look](https://www.w3schools.com/cssref/css3_pr_word-wrap.asp) – pol Feb 22 '17 at 03:08
-
Correct, use "word-wrap". See: http://caniuse.com/#search=overflow-w – JakeParis Feb 22 '17 at 03:09
-
have a look at this. http://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break/15137272#15137272 – haeminish Feb 22 '17 at 03:10
-
@haeminish What is the reason for linking to that other SO question? – JakeParis Feb 22 '17 at 03:13
-
someone said that word-wrap is moved to overflow-wrap. Seems like I can have both in my css. – haeminish Feb 22 '17 at 03:14
1 Answers
1
The older name which you can use for backwards compatibility is word-wrap. Be sure to put the older property first, like so:
word-wrap: break-word;
overflow-wrap: break-word;
JakeParis
- 11,056
- 3
- 42
- 65
-
So putting word-wrap before overflow-wrap will take care of backwards compatibility while the other is for newer browsers? – haeminish Feb 22 '17 at 03:18
-
It should, yes. Any browser that recognizes both should have the same behavior for both. Any browser that only uses the older one will just ignore the newer one. – JakeParis Feb 22 '17 at 03:20
-
in the first link `http://caniuse.com/#search=overflow-w` seems like IE only partially support word-wrap. In fact, word-wrap and overflow-wrap are supported exactly the same. – haeminish Feb 22 '17 at 03:29
-
Just to clarify, firefox 48 doesn't recognize `overflow-wrap`. I guess the yellow ones are for `word-wrap` – pol Feb 22 '17 at 03:38