css 横向截断Flex子对象，纵向截断则强制其位于自己的行上

lnxxn5zx 于 2023-10-21 发布在其他

关注(0)|答案(2)|浏览(93)

我使用CSS（这里通过Tailwind简洁）强制一个flex子对象在纵向模式下位于自己的行上，方法是将flex容器设置为flex-wrap，并将子对象的order更改为last，宽度更改为full，这样它就必须位于自己的行上。

<div class="flex gap-2 flex-wrap [&_*]:border-b [&_*]:px-2">
  <div>fixed</div>
  <div class="truncate order-last w-full landscape:order-[unset] landscape:w-[unset]">variable</div>
  <div class="flex-1 text-center">stretch</div>
  <div>fixed</div>
</div>

这个很好用。
肖像：

景观：

当truncate子节点包含的内容应该被截断，但实际上由于flex-wrap的原因，其他子节点被推到了新的一行时，它就会崩溃。工作在纵向，但在横向，truncate孩子只是继续前进，并推出其兄弟姐妹的边缘。
肖像：

景观：

这是所需的结果：
肖像：

景观：

我必须使用什么CSS选项来控制flex-wrap和text-overflow: ellipsis的顺序，以使truncate子节点中的文本省略，而不是将其兄弟节点推到下一行？
Tailwind Play

css

来源：https://stackoverflow.com/questions/77296615/truncate-flex-child-in-landscape-or-force-to-be-on-its-own-line-if-portrait

2条答案

按热度按时间

bvjxkvbb1#

使用orientation媒体查询，或在希望.truncate换行时在媒体查询中指定一个点。
一个简单的例子，做你想要的（如果我正确理解的问题......）：

body {
  margin: 0;
  min-width: 320px;
}

.wrapp{
  padding: 16px;
  border-bottom: solid 1px;
  display: flex;
  gap: 16px;
}

@media (orientation: portrait) {
  .wrapp{
    flex-wrap: wrap;
  }
}

.fixed {
  flex: none;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (orientation: portrait) {
  .truncate {
    order: 1;
  }
}

.stretch {
  margin: auto;
  flex: none;
}

<div class="wrapp">
  <div class="fixed">fixed</div>
  <div class="truncate">
    variable variable variable variable variable variable variable variable variable
  </div>
  <div class="stretch">stretch</div>
  <div class="fixed">fixed</div>
</div>

赞(0）回复(0）举报 2023-10-21

jdzmm42g2#

添加以下样式来截断解决问题

.truncate {
    flex-basis: 10px;
    flex-grow: 1;
}

我不知道tailwind，所以我只能给予你简单的CSS解决方案

赞(0）回复(0）举报 2023-10-21

我来回答

css 横向截断Flex子对象，纵向截断则强制其位于自己的行上

2条答案

相关问题

热门标签

最新问答