レスポンシブ対応が増えた影響で、文章の改行処理が結構大変だったりします。本来は改行しない一文で表示させるのが一番やさしいのですが、英文のそれと違って妙な改行は不格好にみえてしまったりします。中央揃えしていると特に気になったり。そこでCSSにて改行を追加する方法を考えてみました。
今回処理した方法
実際に気になってしまったのは、お知らせ部分の表示。文頭に年月日、スペースを挟んでお知らせのタイトルが一文で表示される状態でした。
2016-08-20 新連載「かっとばせ、あたっくゴロー！ あいつの未来」について（プレスリリース）
上記のような長い一文のお知らせタイトルだったとして、スマートフォンでは微妙な折り返しになってしまったとします。そこで年月日の後に改行を入れて2段の表示に切り替えたい。でも、それはスマートフォンサイズの場合のみでPCでは一文のままにするような流れでした。なので、ひとまず影響の少ないようにするため年月日部分をspanタグで囲ってみました。
<span class="yyyymmdd">2016-08-20 </span>新連載「かっとばせ、あたっくゴロー！ あいつの未来」について（プレスリリース）
疑似要素afterを使って、\aを追加
次にyyyymmddクラスに疑似要素afterを使って改行を追加したいのですが、改行を表すのは”\a”だそうです。なので、以下のようにCSSを書いてみました。
.yyyymmdd:after {
content: "\a";
}
で、実行してみるも…改行は反映されず。むむむ。困った。何か抜けてるのか？ と思って調べてみるとwhite-spaceを使うといいことが判明。値をpreにすれば改行をそのまま表示してくれるので、それを追加。
.yyyymmdd:after {
content: "\a";
white-space: pre;
}
2016-08-20
新連載「かっとばせ、あたっくゴロー！ あいつの未来」について（プレスリリース）
と、こんな感じに改行されました。思ったよりも簡単ですよね。あとはこれをレスポンシブのスマホ用の部分に適用してあげるだけでOKです。
他の方法がないか考えてみる
他の方法としては、事前に改行タグを埋め込んでおいて、スマホサイズの時にだけ有効かする方法もありそうです。たとえば先ほどのお知らせがnewsというクラスで囲まれていたとして
<div class="news">2016-08-20 新連載「かっとばせ、あたっくゴロー！ あいつの未来」について（プレスリリース）</div>
これに改行タグを埋め込んでおきます。
<div class="news">2016-08-20 <br />新連載「かっとばせ、あたっくゴロー！ あいつの未来」について（プレスリリース）</div>
そして、普段表示の際にはnews内の改行部分を無効化しておくようにCSSを書いておく。
.news br {
display: none;
}
で、スマホサイズになったときに有効かしてあげると改行されるます。
【スマホ部分】
.new br {
display: inline;
}
たぶんinlineではなくても改行されるようになると思います。
まとめ
いずれにしても、表示部分の調整は手間がかかるかと思います。できればスマートなスタイルで記述しておきたいものですよね。といいつつ、手抜きをしてしまうことも多々あるのですが…。参考になれば幸いです。