breadcrumb with text overflow ellipsis

by stephane_klein

HTML

<p>
I want this output :
</p>

<div style="max-width: 1200px">
  <div style="display: flex; gap: 1em; width: 100%;">
    <div style="border: solid;  flex-basis: 50%;"><!-- left panel -->
        <ul style="display: flex; gap: 1em; list-style: none; padding: 0;">
          <li><div style="border:1px solid blue;">one two three foor five...</div></li>
          <li><div style="border:1px solid blue;">one two three foor ...</div></li>
          <li style="flex-grow: 1;"><div style="border:1px solid blue;">one two three foor five ...</div></li>
        </ul>   
    </div>
    <div style="border: solid; flex-basis: 50%;"><!-- right panel -->
        <ul style="display: flex; gap: 1em; list-style: none; padding: 0; ">
          <li><div style="border:1px solid blue;">one two three foor five ...</div></li>
          <li><div style="border:1px solid blue;">one two three foor ...</div></li>
          <li style="flex-grow: 1;"><div style="border:1px solid blue;">one two three foor five...</div></li>
        </ul>      
    </div>
  </div>
</div>

<p>
... with this html with <code>"overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"</code> :
</p>

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