ミギムキ

[CSS] 数文字だけの中途半端な改行を防ぎたい

サンプルコード

html

<p>黄昏よりも昏きもの、血の流れより紅きもの。時の流れに埋もれし偉大なる汝の名において、我ここに闇に誓わん。我等が前に立ち塞がりしすべての愚かなるものに、我と汝が力もて等しく<span class="bw">滅びを与えんことを。</span></p>
スポンサー広告

CSS

.bw { display: inline-block; }

リード文用のスタイル

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; } }