CSS だけを使用するとコンテンツが収まらない場合、中央の要素を新しい行に分割するにはどうすればよいですか?

Question

以下はより一般的な例です。

<div>
  <div>短いダイナミック テキスト。</div>
  <div id="in-between">長いダイナミック テキストの可能性があります...</div>
  <div>短いダイナミック テキスト。</div>
</div>

要素の順序や型を事前に変更したり、間にヘルパーを追加したりすることが可能です。すべてのテキストは折り返されません。固定の幅や高さを指定する必要はありません。

DOM を変更せずに CSS のみを使用してこの効果を実現するにはどうすればよいですか?では、コンテンツが収まらない場合、中央の要素を新しい行に分割するにはどうすればよいでしょうか?出来ますか？

一部のスニペットについては、さらに詳細に説明してテストすることができます。 ＃＃＃。例 { ディスプレイ: フレックス; フレックスラップ: ラップ; カラムギャップ: 0.5rem; コンテンツの位置揃え: 間のスペース; } .example .セパレート { フレックスグロー: 1; } .example .long-b { order: 1; /* これは何らかの魔法によって起こるはずです */ } /* 以下は変更しないでください */ 。容器 { ボーダー: 0.5rem 黒一色。 背景: 青; } 。要素 { 境界線: 0.5rem の黄色一色。 パディング: 0.5rem; 色: 白; ホワイトスペース: ナラップ; オーバーフロー: 非表示; テキストオーバーフロー: 省略記号; } .short-a:前 { 内容: 「たった 3 つの単語」; } .short-b:before { 内容: 「フラグ」; } .short-c:before { 内容: "スタックオーバーフローが大好きです"; } .short-d:before { 内容: "属性"; } .long-a:前 { 内容: 「私はそれほど長くはありません」; } .long-b:before { 内容: 「私は非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常に非常にとてもとてもとてもとてもとてもとてもとても長いです。」 }

<div class="コンテナ例"> <div class="element short-a"></div> <div class="要素を分離したlong-a"></div> <div class="element short-b"></div> </div> <br /> <div class="コンテナ例"> <div class="element short-c"></div> <div class="要素別long-b"></div> <div class="element short-d"></div> </div>

現在の回答は役に立ち、受け入れられます。しかし、float を利用しない他の方法はあるのでしょうか (または今後あるのでしょうか)?

Answer 1

float がここでの唯一の解決策ですが、HTML 構造を調整する必要があります (これがあなたが求めていることに反することはわかっていますが、以下はいくつかのアイデアを与えるかもしれません)

＃＃＃。箱 { ボーダー: 1 ピクセル赤一色; パディング: 3px; /* デバッグする */ オーバーフロー: 非表示; サイズ変更: 水平; /**/ } .box > div { ボーダー: 1px ソリッド #000; ボックスのサイズ設定: ボーダーボックス; } .box > :first-child { フロート: 左; } .box > :nth-child(2) { フロート: 右; } #間 { 表示: インラインブロック; /* 省略記号の代わりにテキストを折り返したい場合は、以下を削除してください*/ 最大幅: 100%; ホワイトスペース: ナラップ; テキストオーバーフロー: 省略記号; オーバーフロー: 非表示; }

  
短いダイナミック テキスト。

  
短いダイナミック テキスト。

  
長いダイナミック テキストの可能性 長いテキストの可能性