改行タグを複数いれても表示時に適応されない現象

"EC-CUBE"をカスタマイズしてCMS機能を強化していたのだが、改行タグが複数入ってもブラウザで見ると適応されていなかったので調査とその対応を行った。

改行タグの<br />を用いてブラウザで確認した場合、一つ目のタグで文章を改行し、2つ目以降を記述するとその個数が空行として表示される。

ところが、<br />の一つ目は改行するものの、それ以降が適応されないという現象が発生した。

ソースを見ると確かに<br />が複数あるのでブラウザ側の問題だと思われる。


同じ現象が出ている制作者がいないかと調べてみるとやはり何人か見つかった。

対処方法としては、CSSに下記を入れると解決されるとのこと。


br{
letter-spacing: 0;
}



今までこの現象に遭遇しなかったのが不思議なくらいだ。

ここ何年かは空行を<br />ではなく、<p>のマージンで確保するようになったせいだろうか。


今回は"EC-CUBE"をCMS的に扱ったのでコンテンツデータを登録する際にテキストエリアに改行コードが入るようになったのでたまたま見つかった。

恐らく"WordPress"や"MovableType"などCMS機能があるものではよく遭遇するかもしれない。


ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

この記事へのトラックバック