Bagaimanakah saya boleh memisahkan elemen tengah kepada baris baharu jika kandungannya tidak sesuai dengan hanya menggunakan CSS?

Question

Berikut adalah lebih kepada contoh umum.

<div>
  <div>Short dynamic text.</div>
  <div id="in-between">Possible long dynamic text...</div>
  <div>Short dynamic text.</div>
</div>

Kemungkinan untuk menukar susunan elemen atau menaip terlebih dahulu atau menambah pembantu di antaranya. Semua teks tidak dibalut. Ia tidak perlu memberikan lebar atau ketinggian tetap.

Bagaimana untuk mencapai kesan ini hanya menggunakan CSS dan bukannya menukar DOM? Jadi, bagaimana anda memisahkan elemen tengah ke baris baharu jika kandungannya tidak sesuai? adakah mungkin?

Beberapa coretan untuk diterangkan dengan lebih terperinci dan diuji.

.example {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  justify-content: space-between;
}

.example .separate {
  flex-grow: 1;
}

.example .long-b {
  order: 1; /* this should happen by some magic */
}

/* do not change below */

.container {
  border: 0.5rem solid black;
  background: blue;
}

.element {
 border: 0.5rem solid yellow;
 padding: 0.5rem;
 color: white;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.short-a:before {
  content: "only three words";
}

.short-b:before {
 content: "flag";
}

.short-c:before {
  content: "i love stackoverflow";
}

.short-d:before {
 content: "attribute";
}

.long-a:before {
  content: "i am not that long";
}

.long-b:before {
  content: "i am very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long";
}

<div class="container example">
  <div class="element short-a"></div>
  <div class="element separate long-a"></div>
  <div class="element short-b"></div>
</div>
<br />
<div class="container example">
  <div class="element short-c"></div>
  <div class="element separate long-b"></div>
  <div class="element short-d"></div>
</div>

Jawapan semasa berguna dan boleh diterima. Walau bagaimanapun, adakah terdapat (atau akan ada) cara lain yang tidak menggunakan terapung?

Answer 1

float adalah satu-satunya penyelesaian di sini, tetapi anda perlu melaraskan struktur HTML (saya tahu ini bertentangan dengan apa yang anda minta, tetapi perkara berikut mungkin memberi anda beberapa idea)

.box {
  border:1px solid red;
  padding: 3px;
  /* to debug */
  overflow: hidden;
  resize: horizontal;
  /**/
}
.box > div {
  border: 1px solid #000;
  box-sizing: border-box;
}

.box > :first-child {
  float: left;
}
.box > :nth-child(2) {
  float: right;
}

#in-between {
  display: inline-block;
  
  /* remove the below if you want text wrap instead of ellpsis*/
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

  
Short dynamic text.
  
Short dynamic text.
  
Possible long dynamic text Possible long text