Prioritize collapse without applying flex to CSS elements?

Question

I have an element <ul>that is designed to display its internal elements <li>horizontally:

one is the first number | two - second number | three - 3rd number | fourth number

This works fine for shorter content, but these “cells” should be reset with different priorities if they are not enough to display without wrapping .

... Something like that:

one is the first number | two is ... | three is ... | e ...

Thus, the first cell should always display 100% of its contents, and two two cells should display ~ 40-50% (flowing or hard-coded width / percent), and the fourth cell may occupy whatever is left (if anything) .. . without overflowing the boundaries of the parent container.

Oh, and these items should be equally vertically aligned for aesthetics.

Can I do it purely without flex / JS? I'm not sure. The idea is to create something visually attractive that can display as much information as possible from the listed sections within one line, the first always displaying all its contents without ellipsis / wrapping / overflow and taking the highest priority on this line.

---

EDIT: , min-width , , min-width. ( "abc" "two is..."... "abc" <li>.

Answer 1

, , flexbox - , :

• A flexbox ul white-space:nowrap flex, .

• ellipsis 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-grow

  . - flex ing.

. !

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>

Hide result