html – 使用flex CSS项设置折叠优先级？

2023年11月25日 284次阅读

我有一个< ul>被设计为列出其内部< li>的元素水平元素：

one is the 1st number | two is the 2nd number | three is the 3rd number | four is the 4th number

这适用于较短的内容,但如果没有足够的空间来显示它们而没有包装,这些“单元”需要以不同的优先级崩溃.

……像这样：

one is the first number | two is the… | three is the… | f…

因此,第一个单元格应始终显示其内容的100％,后两个单元格应显示~40-50％(流畅地或作为硬编码的宽度/百分比),并且第四个单元格可以占用剩余的任何内容(如果有的话) )…没有溢出父容器的边界.

哦,这些物品都需要同样垂直对齐才能美观.

没有flex / JS可以干净利落地做什么？我不确定.我们的想法是创建一些视觉上吸引人的东西,它可以在单行中尽可能多地显示列出的部分中的信息,第一个信息总是显示其所有内容而没有省略号/包装/溢出并在该行中占据最高优先级.

编辑：我只想澄清设置min-width在这里不起作用,因为内容可以在小于最小宽度的情况下呈现. (考虑“abc”而不是“two is the ……”……那应该只为“lt&li;”取“abc”的空间.

最佳答案 所以这就是我能想到的Flexbox – 我想这会让你开始：

>具有空白区域的ul flexbox：nowrap到所有flex子项,以将文本内容保持在一行中.
>根据您的要求,向第一个孩子添加了省略号,除了第一个孩子.
>这里的魔力是由：

ul > li:first-child {
  flex: 0 1 auto;
}
ul > li:nth-child(2) {
  flex: 0 1 auto;
}
ul > li:nth-child(3) {
  flex: 0 2 auto;
}
ul > li:nth-child(4) {
  flex: 0 3 auto;
}

一个.对于第一个flex子,我们禁用flex-grow

湾对于其他弹性儿童,我们使用相对屈曲.

请告诉我您对此的反馈.谢谢！

ul {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin: 0;
}
ul > li {
  white-space: nowrap;
  padding: 5px;
}
ul > li:not(:last-child) {
  border-right: 1px solid;
}
ul > li:not(:first-child) {
  overflow: hidden;
  text-overflow: ellipsis;
}
ul > li:first-child {
  flex: 0 1 auto;
}
ul > li:nth-child(2) {
  flex: 0 1 auto;
}
ul > li:nth-child(3) {
  flex: 0 2 auto;
}
ul > li:nth-child(4) {
  flex: 0 3 auto;
}
<ul>
  <li>one is the 1st number</li>
  <li>two is the 2nd number</li>
  <li>three is the 3rd number</li>
  <li>four is the 4th number</li>
</ul>
点赞