HTMLがMinifyされる環境で改行文字を強制出力する（インライン要素の折り返し）
2024年8月9日
ちょっと込み入った話ですが、HTML が Minify されるサーバからブラウザに、改行や空白文字を強制的に喰わせる方法についてメモしておきます。
具体的には、インライン要素の折り返し制御（ワードラップ）のヒントになる文字を Minify 経由でも出力したいぜ！ということです。
white-space や word-break、word-wrap が効かないとお悩みの方とか、あとは、inline-block で特定要素だけ水平方向に間が開かない、という場合のスペーシングにも使えると思います。
文字実体参照使えばイケる感
改行文字を Minify 経由でも強制出力する方法は単純。
文字実体参照「
」などを使って、0x0a に相当する文字を吐き出してやればOK。
0x0a を表す文字実体参照には「
」もありますが、IE 8 などの古いブラウザでは使えないので、今はまだ文字コードを直接指定した方が無難でしょう。
また、改行でなく、空白文字を出力する場合は「 」で良いと思います。
ひょっとして、Minify 製品によっては今回の方法が使えないモノもあるかもですが、少なくとも、手元の環境ではこれでうまくいってます。
ちなみに、
 はケースセンシティブ（大文字小文字を区別する）なのでご注意を。
本番系でしか Minify が効かない環境だと、本番適用後にレイアウト問題が出て面倒なんですよねー。これ。
関連情報：