[CSS]記号だけが突き抜けてしまうのを直す

知らぬ間にスマホ版のサイトが、こんな感じにテキストが突き抜けていた。めちょっく！
対策を調べてみるとbox-sizing: border-boxばっかり出てきたが、これでは直らならなかった。開発者ツールで「!」を削除してみると、何故か突きつけない事がわかったので、もう少しこねくり回したところ、以下のコードで直った。良かった。

word-wrap: break-word

直った状態。やったぜ。

参考

【HTML･CSS】 文章の一部、文字が領域を突き抜けてしまうのを検証してみた