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

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

WBOY

リリース： 2016-06-21 08:45:58

オリジナル

1365 人が閲覧しました

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

小さな問題が発生しました。ヘッダーにスパンがあります。、スパンの前に改行を生成したいと思います。記録のために言っておきますが、スパンの前に
タグを挿入することは問題ありません (実際、このタグを表示/非表示にすることもできます。これは非常に便利です)。しかし...レイアウト関連のことを 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>

ログイン後にコピー

ブロックレベルの要素は

とは異なり、

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

しかし、設計上、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 を通じて要素にテーブルレイアウトを強制します。唯一の問題は、セマンティックではないことです。