自动换行不适用于百分比宽度

Question

I want to align to next to each other with width:48% . If there is text which has no spaces, the string should be broken. Therefore, I added word-wrap:break-word .

This won't work. In Chrome, I get this working if I also add word-break:break-word . In IE, it would never work.

Here is the fiddle: http://jsfiddle.net/e02k0d8e/

What do I have to add to .GridRole to get this working in all browsers? I do not want to add break-all!

Answer 1

This scenario can Handle by the two way.

1) Some charterers after space.

2) Use word-wrap:break-all

Answer 2

There are two way.

Solution 1

-ms-word-break: break-all;
       word-break: break-all;

Solution 2

word-break: break-word;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;