CSSの禁則処理について、色々調べてみたら大変だった件 - コツコツとブクマを消化していくHTMLコーディングをしている時に、デザインデータと同じ幅にしているはずなのに、何故か先頭に「句読点」が付いていて、良い感じで改行しなきゃということがあったりします。特にIEのブラウザで…… 目視で改行を指定できるならまだ良いですが、システム埋め込みになったら？レスポンシブの場合は?その辺りphotoshopだと禁則処理設定があるのですが、CSSにもありました。 結論、overflow-wrap: break-wordを使おう。 IE7以下にも対応ならば、word-wrap: break-wordも書いておこう。 p { overflow-wrap: break-word; word-wrap: break-word; } overflow-wrap: break-wordがしてくれること 句読点が先頭で始まらないようにしてくれる 半角英数文字の羅列がboxを突き抜けないよう、折り返し処理
