JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <ul class="left breadcrumblist">
        <li class="active"><a href="#">Airways</a></li>
        <li><a href="#">Trauma</a></li>
        <li><a href="#">Medical</a></li>
        <li><a href="#">OB | Peds</a></li>
        <li><a href="#">Patient Assessment</a></li>
        <li><a href="#">Proprietary</a></li>
        <li><a href="#">Trauma</a></li>
        <li><a href="#">Medical</a></li>
        <li><a href="#">OB | Peds</a></li>
        <li><a href="#">Patient Assessment</a></li>
        <li><a href="#">Proprietary</a></li>
    </ul>

CSS

/* This is just to give it some styling as you haven't given any */
.breadcrumblist li {
    list-style: none;
    display: inline-block;
    padding-right: 0.5em;
}
.breadcrumblist li + li::before{
  content: "/";
  padding-right: 0.5em;
}


/* adjust to your breakpoint. 9999 just so it works on large screen as an example */
@media only screen and (max-width: 9999px)  { 
  / * hide all */
  .breadcrumblist li{
    display: none;
  }
  / * show first and last */
  .breadcrumblist li:first-child,
  .breadcrumblist li:last-child{
    display: inline-block;
  }
  
  /* add ... to the end of the first one */
  .breadcrumblist li:first-child::after{
    content: "...";
    padding-left: 0.5em;
  }
  
  /* fiddle with the content we added in styling */
  .breadcrumblist li + li::before{
    content: "";
    padding-right: 0;
  }

}