以下内容更像是一个通用的示例.
<div>
<div>Short dynamic text.</div>
<div id="in-between">Possible long dynamic text...</div>
<div>Short dynamic text.</div>
</div>
更改元素类型或在其间添加辅助对象是可能的.并非所有文本都不换行.不能给出固定的宽度或高度.
如何仅使用CSS而不通过更改DOM来实现这样的功能？那么，如果元素的内容不适合，如何将元素之间的一些内容分隔到新行中呢？这完全有可能吗？
更详细地说明它并进行测试的一些代码片段.
.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>