TECH BLOG

マークリープス技術ブログ

open

cssで複数行テキストの行ごとに背景色を適用する方法

複数行にまたがるテキストを表示する際、以下のように各行の長さに合わせて背景色を付けたい場面が多々あるかと思います。

 

 

display: inline; を指定した場合

display: inline; を指定することで近いことは出来ますが、行ごとのテキストの左右に
均等な余白を付けることができません。

・html

・css

 

 

また、行ごとをpやspanタグで囲む方法もありますが、極力タグを増やしたくない…

box-decoration-break: clone; を使う

box-decoration-break: clone; を指定することで、
複数行のテキストの余白を調整することが出来ます。

 

・html

・css

 

 

※Firefox以外のモダンブラウザはベンダープレフィックス-webkit-が必要です。
IEには非対応となっています。

position と一緒に使用する際は注意が必要

・css

 

上記のようにbox-decoration-break: clone; とposition: absolute; を
一緒に記述すると、意図しない表示になってしまいます。

 

position で配置する際には、position指定用のdivで複数行テキストを囲む必要があります。

・html

 

よく読まれている関連記事

関連最新記事