html - 在不将 flex 应用于 CSS 元素的情况下设置折叠优先级？

Question

我有一个 <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不会在这里工作，因为内容可以在小于 min-width 的时间内呈现. (考虑“abc”而不是“two is the...”……对于 <li> 应该只占用“abc”的空间。

Answer 1

所以这就是我可以用 flexbox 想到的 - 我想这会让你开始:

1. 一个 ul 的 flexbox 和 white-space:nowrap 到所有的 flex child ，以保持文本内容在一个单一的行。

2. 根据您的要求向 flex 子项添加了 省略号，除了第一个。

3. 这里的魔法是由:

   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 child ，我们禁用 flex-grow

   对于其他 flex 子项，我们使用相对 flexing。

让我知道您对此的反馈。谢谢!

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>