breadcrumb with text overflow ellipsis

by stephane_klein

HTML

<div
  style='padding: 50px 20px;gap: 10px; background-color: blue; display: flex; width: 100%;  width: 400px;'
>
   <div style='border: 1px solid white; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'>
     1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16
   </div>
   <div style='border: 1px solid white; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'>
     1, 2, 3, 4, 5, 6, 7, 8
   </div>
   <div style='border: 1px solid white; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'>
     1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16
   </div>
</div>