webのコーディング中に15分くらいタイトルの問題が発生してハマったのでメモっておきます。 既存のcssソースを流用して作成していて、「全く同じにしてるのになんではみ出すんやっ!?」となり若干イラつきました。わりと初心者的なミスでしたが笑 具体的には、tableタグの中で、さらにpタグで囲った文章を書いていた(そもそもここはイケてない・・)のですが、tableの横幅からガッツリpタグの文章がはみ出していました。既存ソースではちゃんと出来てるのに~ 問題はword-wrap:break-wordがなかったから! 既存ソースというか本番環境では文章の部分がちゃんとした日本語だったのですが、私が使っていた開発環境では適当な英字の羅列だったので、問題が露呈しました。 以下に問題が発生するパターンと発生しないパターンを記載していきます 問題が起きたソースの簡略化した例 かなり省きますが、こんな感じで
![css – ブロックレベルから文字がはみ出してしまう | memorandum-plus](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e247a212b9ba9055f4b4abdd42238cd01860458/height=288;version=1;width=512/https%3A%2F%2Fmemorandum-plus.com%2Fwp-content%2Fplugins%2Fall-in-one-seo-pack%2Fimages%2Fdefault-user-image.png)