[翻訳] インライン要素の前に改行を挿入します | CSS-Tricks_html/css_WEB-ITnose

しかし、設計上、span を使用する必要があるため、span を使用するのには理由があります。改行後のテキストは、背景やパディングなどを与えたい場合があるため、インライン/インライン ブロック要素である必要があります。

疑似要素を介して改行を挿入できます

それは簡単です:

h1 span::before {  content: "\A";}

ただし... 要素 。改行は効果がありません。実際のキャリッジ リターンやライン フィードと同様に、生成されません。

スタイルを使用して空白文字を有効にし、強制的に改行を有効にすることができます...

h1.two span::before {  content: "\A";  white-space: pre;}

これは実際に機能します。ただし...パディングと背景の存在により、前の行の左側のパディング部分が残ります。

これを修正するには、box-decoration-break: clone; を使用します。 "左の「エッジ ラッピング」問題ですが...前の行に大きな黒いブロックが発生します: (ここを理解していない学生はこの例を参照してください - 翻訳者のメモ)

box-decoration-break はいくつかの問題に対処するのに最適ですが、これはそうではありません。

スパンを inline-block に変更すると、そのブロック内で改行が発生しますが、これは私たちが望む効果ではありません:

疑似要素の設定を変更します。これをブロックレベルの要素として使用し、スパンをインライン要素として残すことも機能しません。

なぜ実際のテキストを疑似テキストに書かないのか疑問に思っているかもしれません。 -要素

これは、アーロン・ブッシュネルが思いついたものです。このトリックは、スパンをブロック レベルの要素にし、疑似要素を介してその中にテキストを挿入し、その疑似要素をインライン要素として使用してスタイルを追加することです。

h1 span {  display: block;}h1 span::before {  content: attr(data-text);  background: black;  padding: 1px 8px;}

大丈夫です!しかし...

私は常に疑似要素トリックのファンですが、この方法で使用するとアクセシビリティが損なわれる可能性があるため、少し危険です。一部の画面読み上げソフトウェアは疑似要素を読み込むと思いますが、すべてがそれをサポートするわけではありませんし、すべてがそれをサポートすることを意図しているわけでもありません。さらに、HTML ドキュメント内でテキストがそのまま表示される場合でも、この方法ですべてのテキストをコピーして貼り付けることはできません。

テーブル レイアウトの使用

私のお気に入りのアプローチは、Thierry Koblentz によって提案されました。単にdisplay:tableをspanに設定するだけです。もちろん、これは実際には表形式のデータではありませんが、それでも問題ありません。テーブル レイアウトの固有のレイアウト プロパティを利用するために、CSS を通じて要素にテーブル レイアウトを強制します。唯一の問題は、セマンティックではないことです。

h1 span {  display: table;}

オンラインの例

を使用するものも含めると良いでしょう。

例: ヘッダー要素のインライン要素の前に改行を挿入してみます。

英語原文：https://css-tricks.com/injecting-line-break/