« 前のページへ戻る

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

投稿日:2019/02/13 更新日:2020/08/25


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

word-wrap: break-word

直った状態
直った状態。やったぜ。

参考

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

書いたヒト 馬上から失礼します