Wie kann ich das mittlere Element in neue Zeilen aufteilen, wenn sein Inhalt nicht passt, indem ich nur CSS verwende?

Question

Das Folgende ist eher ein allgemeines Beispiel.

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

Möglichkeit, die Reihenfolge oder den Typ der Elemente vorher zu ändern oder dazwischen Helfer hinzuzufügen. Der gesamte Text wird nicht umbrochen. Es ist nicht notwendig, eine feste Breite oder Höhe anzugeben.

Wie kann dieser Effekt nur mit CSS erzielt werden, anstatt das DOM zu ändern? Wie trennt man also das mittlere Element in eine neue Zeile, wenn der Inhalt nicht passt? Ist es möglich?

Einige Ausschnitte zum genaueren Erklären und Testen.

.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>

Die aktuelle Antwort ist hilfreich und akzeptabel. Gibt es (oder wird es) jedoch andere Möglichkeiten, bei denen Floats nicht verwendet werden?

Answer 1

float 是这里唯一的解决方案，但是你必须调整 HTML 结构（我知道这违背了你的要求，但下面的内容可能会给你一些想法）

.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