box-decoration-break | Frontend Practical Guide

Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

対応ブラウザ

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

.tag {
  box-decoration-break: clone;
  background: #4caf50;
  padding: 2px 8px;
  border-radius: 4px;
}

CSS Clone demo.

CSS Slice(srais) demo.

CSS tag styleclone demo.

改行されたインライン要素への統一装飾

複数行にまたがるハイライトやタグ要素に、行ごとにパディングとボーダーを独立して適用し、行末・行頭でも美しい表示を維持できます。

Safariでは未サポートです。-webkit-box-decoration-break プレフィックス付き版で一部動作しますが、標準版の対応を確認してください。