More than 5 years have passed since last update.

display: inline-block 使用時にword-wrap: break-word が効かない

Posted at 2019-05-20

長い単語やURLをページに表示する際、何も指定しないと改行してくれません。
CSSで、word-wrap: break-word を指定すると改行してくれます。

ただ、同時にdisplay: inline-block を利用すると効きません。
その場合は、max-width: 100% を指定することでうまくいきます。

.message {
 display: inline-block;
 word-wrap: break-word;
 max-width: 100%;
}