[css] 改行を制する

HTMLを学び始めた時に、開業する度に<br>タグをひたすら書いていたことを思い出しますが、最近のCSSトレンドでは、あまりBRを書かない方が良いとされているようですね。 個人的に気に入らないのは、wordpressに関してで、<p>でひたすら改行をくくっているため、ページソースが少しわかりにくくなっている始末です。 wikipediaのように、段落単位のpぐらいでいいのだが、恐らく改行をベタにコントロールしているのだと思われますね。

改行をそのまま表現したい場合

webページをCMSでなく、独自で作っている人であれば、cssを以下のようにするだけで、改行を記述のままに表現することができます。

See the Pen new line-pattern2 by YugetaKoji (@geta1972) on CodePen.

この２つのcss改行命令を解説すると、

white-space:pre-wrap;

この命令が改行をそのまま表示されるおまじないで、preタグのスタイルになります。

word-break:break-all;

word-breakは、文字の区切りをコントロールする命令で、ブラウザは標準では、記号や英単語などの区切りの良い箇所で改行をする仕様になっていますが、これを、サイズ単位で改行するようにしてくれます。

連続改行の対応

わざと３番目の改行を１行多くしてみましたが、これは反映されていないようです。 もし空行を反映したい場合は、「&ngsp;」を挿入するといいでしょう。

See the Pen new line-after by YugetaKoji (@geta1972) on CodePen.

この機能の使い分けについて

HTMLは使用特性として、もともとドキュメントを表示するマークアップ言語として作られているので、css機能も後発で搭載されているんですが、今ではWEBアプリケーションという言葉が当たり前になっている上、3Dエンジンや音声や動画などのマルチメディアまで表現できる優れた表示フォーマットになっています。 ただし、インターネットの特性上、文字を表示することが圧倒的に多い為、ブログページなどでは、こうしたcssのデフォルト機能をコンバートして使うというのは、お作法として覚えておいたほうがいいでしょう。