如果元素的内容不适合只使用CSS，如何将中间元素分隔到新的一行？

b5lpy0ml 于 2023-01-18 发布在其他

关注(0)|答案(1)|浏览(125)

下面是一个比较一般的例子。

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

可以预先更改元素顺序或类型，或者在元素之间添加助手。所有文本都不会换行。不必给定固定的宽度或高度。
如何只使用CSS而不是通过改变DOM来实现这样的效果？那么，如果内容不合适，如何将一些介于元素之间的元素分隔到新的一行？这可能吗？

一些片段来更详细地说明它并进行测试。
x一个一个一个一个x一个一个二个x
目前的答案是有帮助的，也是可以接受的。然而，是否有（或是否会有）其他不使用浮动的方法？

css

来源：https://stackoverflow.com/questions/75135924/how-to-separate-an-in-between-element-to-a-new-line-if-its-content-does-not-fit

1条答案

按热度按时间

pod7payv1#

浮动是唯一的解决方案，但你必须调整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;
}

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

赞(0）回复(0）举报 2023-01-18

我来回答

如果元素的内容不适合只使用CSS，如何将中间元素分隔到新的一行？

1条答案

相关问题

热门标签

最新问答