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

我有一个< 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;

}

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