JSFiddle - React, Tailwind, and code Playground

by chrischilcoat

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#"><span class="fa fa-folder"></span> Germany</a></li>
          <li class="breadcrumb-item" style="display:none;">
            <a href="#" class="dropdown-toggle" role="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-ellipsis-h"></span></a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            </div>
          </li>
          <li class="breadcrumb-item"><a href="#">One</a></li>
          <li class="breadcrumb-item"><a href="#">Two</a></li>
          <li class="breadcrumb-item"><a href="#">Three</a></li>
          <li class="breadcrumb-item"><a href="#">Four</a></li>
          <li class="breadcrumb-item active" aria-current="page">Five</li>
        </ol>
      </nav>
    </div>
  </div>
</div>

SCSS

.row {
  margin: 20px;
}

.col {
  .breadcrumb {
    margin:0 -15px;
    border-radius:0;
    //background:green;
    .breadcrumb-item {
       white-space: nowrap; 
       overflow: hidden;
       text-overflow: ellipsis;
       max-width:150px;
       //background:red;
       .dropdown-toggle::after {
         display:none;
       }
    }
    .breadcrumb-item:nth-child(even) {
      //background:pink;
    }
  }
}

JavaScript

(function($) {
  'use strict';

  $.fn.extend({
    responsiveBreadcrumb: function(options) {
      var options = $.extend({
          width: '730',
					url: ''
        },
        options
      );

      return this.each(function() {
        var $this = $(this),
            $window = $(window),
            $widthOfLastItemMoved = 0,
            $textOfLastItemMoved = '',
            $itemsMoved = 0,
            $itemsWidth = 0,
            $itemsWidthArray = [],
            $itemsTextArray = [],
            $wrapper = $this,
            $items = $this.find('.breadcrumb-item'),
            $ellipsis = '<li class="breadcrumb-item">'+
                        ' <a href="#" class="dropdown-toggle" role="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-ellipsis-h"></span></a>'+
                        ' <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">'+
                        ' </div>'+
                        '</li>',          
            setup = function() {
              makeArrays();
              update();  
            },
            makeArrays = function() {
              
            },
            getWrapperWidth = function() {
              var $x = $this.width();
              return $x;
            },
            getItemsWidth = function() {
              var $x = 0;   
              $items.each(function( index ) {
                var $y = Math.round($(this).outerWidth());
                $x = $x + $y;
              });
              return $x;
            },
            makeDropdownItem = function(x) {
             /*     
             console.log('makeDropdownItem');
              
              $widthOfLastItemMoved = Math.round($this.find('.breadcrumb-item:nth-child(3)').outerWidth());
              $itemsWidthArray.push($widthOfLastItemMoved);
              
              $textOfLastItemMoved = $this.find('.breadcrumb-item:nth-child(3)').text();
              
      ...