JSFiddle - React, Tailwind, and code Playground

by akaimo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<div class="container">
    <div class="row">
		<h2>Breadcrumbs 1 (6 elements)</h2>
        <ul id="bc1" class="btn-group btn-breadcrumb">
            <a href="#" class="btn btn-default"><i class="fa fa-home"></i></a>
            <li class="btn btn-default"><div>label 1</div></li>
            <li class="btn btn-default"><div>label 2. A very very long one to truncate</div></li>
            <li><a href="#" class="btn btn-default"><div>label 3</div></a></li>
            <li><a href="#" class="btn btn-default">label 4. A very very long one to truncate A very very long one to truncate</a></li>
            <li><a href="#" class="btn btn-default"><div>label 5</div></a></li>
            <li><a href="#" class="btn btn-default">label 6. A very very long one to truncate</a></li>
            <li><a href="#" class="btn btn-default">label 7. A very very long one to truncate</a></li>
            <li><a href="#" class="btn btn-default">label 8. A very very long one to truncate</a></li>
        </ul>
	</div>
    
    <div class="row">
    	<h2>Breadcrumbs 2 (8 elements)</h2>
        <ul id="bc2" class="btn-group btn-breadcrumb">
            <li class="btn btn-default"><a href="#" class="slice"><i class="fa fa-home"></i></a></li>
            <li class="btn btn-default">label 1. A very very long one to truncate</li>
            <li class="btn btn-default"><a href="#" class="slice">label 2</a></li>
            <li class="btn btn-default"><a href="#" class="slice">label 3</a></li>
            <li class="btn btn-default"><a href="#" class="slice">label 4</a></li>
            <li class="btn btn-default"><a href="#" class="slice">label 5. A very very long one to truncate</a></li>
            <li class="btn btn-default"><a href="#" class="slice">label 6</a></li>
            <li class="btn...

CSS

/* The responsive part */
.btn-breadcrumb > li > a {
    /* With less: .text-overflow(); */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}
.btn-breadcrumb > *:nth-child(n+2) {
  display:none;
}

/* === For phones =================================== */
@media (max-width: 767px) {
    .btn-breadcrumb > *:nth-last-child(-n+2) {
        display: inline-block;
    } 
    .btn-breadcrumb > * a {
        max-width: 60px;
    }
}

/* === For tablets ================================== */
@media (min-width: 768px) and (max-width:991px) {
    .btn-breadcrumb > *:nth-last-child(-n+4) {
        display: inline-block;
    } 
    .btn-breadcrumb > * a {
        max-width: 100px;
    }
}

/* === For desktops ================================== */
@media (min-width: 992px) {
    .btn-breadcrumb > *:nth-last-child(-n+6) {
        display:inline-block;
    } 
    .btn-breadcrumb > * a {
        max-width: 200px;
        width:100%;
    }
}