[CSS] 数文字だけの中途半端な改行を防ぎたい
- 中央寄せにしたリード文は、見出しで目を止めたユーザーを引きつけるための大事なコンテンツです
- しかし、いくらいい文章でもその文末の一、二文字だけがちょろっと改行してしまうと、それだけでかなり残念な感じになってしまいます
- 要所要所にbrタグで改行を入れたとしても、ウィンドウサイズを変えたら別の改行を生む要因になってしまうこともあります
- 今回はこういった数文字だけの改行の対応策をご紹介します
サンプルコード
html
<p>黄昏よりも昏きもの、血の流れより紅きもの。時の流れに埋もれし偉大なる汝の名において、我ここに闇に誓わん。我等が前に立ち塞がりしすべての愚かなるものに、我と汝が力もて等しく<span class="bw">滅びを与えんことを。</span></p>
CSS
.bw {
display: inline-block;
}
- 文章の末尾数文字をspanタグで囲みます
- このspanタグに「display: inline-block;」を指定することで、このインラインブロックの中で改行されることがなくなり、ブロックが行に収まらないならまるごと改行されます
- これにより文末の改行を制御できるようになり、数文字だけ改行されるということがなくなります
- spanタグで囲む文章は8～12文字程度にするとよいです。あまり長すぎる文章で囲むと、囲んだ文字を庇ってその前の文章がぶつ切りされてしまいます
リード文用のスタイル
- リード文用のスタイルとして、こんなのもオススメです
html
<div class="lead">
<p>黄昏よりも昏きもの、血の流れより紅きもの。時の流れに埋もれし偉大なる汝の名において、我ここに闇に誓わん。我等が前に立ち塞がりしすべての愚かなるものに、我と汝が力もて等しく<span>滅びを与えんことを。</span></p>
<p>悪夢の王の一欠けよ、天空（そら）の戒めとき離れたし凍れる黒き虚ろの刃よ、我が力我が身となりて､共に滅びの道を歩まん。<span>神々の魂すらも打ち砕き</span></p>
</div>
CSS
.lead > p {
line-height: 1.5;
}
.lead > p:nth-of-type(n + 2) {
margin: 1em 0px 0px;
}
.lead > p > span {
display: inline-block;
}
@media print, (min-width: 768px) {
.lead {
margin: 0px auto;
width: 45em;
text-align: center;
}
}
- 文章を読みやすくするための一行あたりの推奨文字数は40文字前後だそうです。そこで、文章全体の幅を45emにしています
- スマホ表示時には中央寄せの恩恵があまりないので、センタリングはタブレットサイズ以上のときにのみ適用しています
- pタグの行間は1.5。pタグ同士は1文字分の改行を入れるとほどよく読みやすいです
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。