a-little-log

box-decoration-breakを使った例

pの中にinlineのspanを入れて、box-decoration-break:cloneを使うと、テキストが折り返してもきれいになります。
また、pにtaxt-align: justify;を指定すると、よりきれいになります（文字による）。余白はline-heightやpaddingを調整してください。

背景グラデーションをつける例

box-decoration-break:cloneを使います。このテキストに背景グラデーションを付けます。これだけで、テキストが折り返してもきれいになります。簡単ですね。必ず指定する要素はinlineにしてください。

borderをつける例

box-decoration-break:cloneを使います。このテキストにborderを付けます。これだけで、テキストが折り返してもきれいになります。簡単ですね。必ず指定する要素はinlineにしてください。

蛍光マーカー（アンダーライン）風

box-decoration-break:cloneを使います。このテキストに背景グラデーションを付けます。これだけで、テキストが折り返してもきれいになります。簡単ですね。必ず指定する要素はinlineにしてください。

失敗例

box-decoration-break:cloneを使わず、inlineのspanに背景をつける例

このテキストに背景グラデーションを付けます。pの中にspanを入れてinline-blockにして、背景にグラデーションをマーカー風になるようにかけます。このやり方の場合、テキストが折り返すとグラデーション内のテキストの左右のpaddingが合わなくなります。

box-decoration-break:cloneでblockやinline-blockを使うと上下の余白がなくなってしまう

box-decoration-break:cloneを使っていても、blockやinline-blockにすると上下の余白がなくなってしまいます。