JSFiddle - React, Tailwind, and code Playground

by kasheftin

HTML

<div class="breadcrumbs">
  <a href="#" class="breadcrumb1 ellipsis">
    SomeLongTitleGoesHereAndItsTooWideToFit
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb1 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb1 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb1 ellipsis">
    Short
  </a>
</div>

<div class="breadcrumbs">
  <a href="#" class="breadcrumb2 ellipsis">
    SomeLongTitleGoesHereAndItsTooWideToFit
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb2 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb2 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb2 ellipsis">
    Short
  </a>
</div>

<div class="breadcrumbs">
  <a href="#" class="breadcrumb3 ellipsis">
    SomeLongTitleGoesHereAndItsTooWideToFit
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb3 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb3 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb3 ellipsis">
    Short
  </a>
</div>

<div class="breadcrumbs">
  <a href="#" class="breadcrumb4 ellipsis">
    SomeLongTitleGoesHereAndItsTooWideToFit
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb4 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb4 ellipsis">
    Short
  </a>
  <div class="breadcrumb-separator">&raquo;</div>
  <a href="#" class="breadcrumb4 ellipsis">
    Short
  </a>
</div>

CSS

.breadcrumbs {
  width: 300px;
  display: flex;
  align-items: center;
  border: 1px solid #000;
  margin: 0 0 50px 0;
  padding: 5px;
}

.breadcrumb-separator {
  flex: 0 0 auto;
  margin: 0 5px;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb1 {
  flex: 0 1 auto;
}

.breadcrumb2 {
  flex: 0 1 25%;
}

.breadcrumb2 {
  flex: 0 1 50%;
}

.breadcrumb4 {
  flex: 0 1 auto;
  max-width: 25%;
}