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

原文: http://www.zcfy.cc/article/517

小さな問題が発生しました。ヘッダーにスパンがあります。 、スパンの前に改行を生成したいと思います。記録のために言っておきますが、スパンの前に 0c6dc11e160d3b678d68754cc175188a タグを挿入することは問題ありません (実際、このタグを表示/非表示にすることもできます。これは非常に便利です)。しかし...レイアウト関連のことを HTML で行わなければならないのは、いつも少し奇妙に感じます。

それでは、もう少し深く掘り下げてみましょう。この探索では、「しかし…」という言葉がたくさん出てきます。

<h1 class="one">  Break right after this  <!-- <br> could go here, but can we do it with CSS? -->  <span>    and before this  </span></h1>

ブロックレベルの要素は

45a2772a6b6107b401db3c9b82c049c2 とは異なり、dc6dce4a544fdca2df29d5ac0ea9906b を使用できます。div を使用できる理由は、これがブロックであるためです。 -level 要素。

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

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

それは簡単です:

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

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

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

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

オンラインの例

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

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

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