IEでword-wrap:break-wordを指定しても折り返されない

URLなどを突き抜ける対策として、IEではword-wrapプロパティをbreak-wordにすることで対応できますが、折り返されない時があります。

HTML

CSS

原因

word-wrapプロパティを指定している要素がインラインレベルの要素である場合に起こる現象の可能性があります。

解決策

インライン要素であることが原因ですので、ブロック要素で扱えるようにしてあげることで回避できます。

CSS