Version plus petite

by stephane_klein

HTML

<ul style="display: flex; gap: 1em; list-style: none; padding: 0; width: 800px; border: 1px solid green;">
<li style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border:1px solid blue;"><div style="width: 100%">one two three four five six seven eight nine ten</div></li>
  <li style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border:1px solid blue;">one two three four five six seven eight nine ten</li>
  <li style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border:1px solid blue;">one two three four five six seven eight nine ten</li>
</ul>   

<ul style="display: flex; gap: 1em; list-style: none; padding: 0; width: 800px; border: 1px solid green;">
  <li style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border:1px solid blue;">one </li>
  <li style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border:1px solid blue;">one</li>
  <li style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border:1px solid blue;">one</li>
</ul>   

<ul style="display: flex; gap: 1em; list-style: none; padding: 0; width: 800px; border: 1px solid green;">
  <li style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border:1px solid blue;">one </li>
  <li style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border:1px solid blue;">one</li>
  <li style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border:1px solid blue;">one two three four five six seven eight nine ten</li>
</ul>   

<ul style="display: flex; gap: 1em; list-style: none; padding: 0; width: 300px; border: 1px solid green;">
  <li style="min-width: 2em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border:1px solid blue;">one </li>
  <li style="min-width: 2em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border:1px solid blue;">one</li>
  <li style="min-width: 2em;overflow: hidden; white-space: nowrap; text-overflow:...