<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <ol id="bc1" class="breadcrumb breadcrumb-arrow"> <li><a href="#">Home</a></li> <li><a href="#">Library Library Library Library Library LibraryLibrary LibraryLibraryLibrary Library</a></li> <li class="active"><span>Data</span></li> </ol> </div>

body{ padding-top: 50px; } .breadcrumb-arrow { height: 36px; padding: 0; line-height: 36px; list-style: none; background-color: #e6e9ed } .breadcrumb-arrow li:first-child a { border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px } .breadcrumb-arrow li, .breadcrumb-arrow li a, .breadcrumb-arrow li span { display: inline-block; vertical-align: top } .breadcrumb-arrow li:not(:first-child) { margin-left: -5px } .breadcrumb-arrow li+li:before { padding: 0; content: "" } .breadcrumb-arrow li span { padding: 0 10px } .breadcrumb-arrow li a, .breadcrumb-arrow li:not(:first-child) span { height: 36px; padding: 0 10px 0 25px; line-height: 36px } .breadcrumb-arrow li:first-child a { padding: 0 10px } .breadcrumb-arrow li a { position: relative; color: #fff; text-decoration: none; background-color: #3bafda; border: 1px solid #3bafda } .breadcrumb-arrow li:first-child a { padding-left: 10px } .breadcrumb-arrow li a:after, .breadcrumb-arrow li a:before { position: absolute; top: -1px; width: 0; height: 0; content: ''; border-top: 18px solid transparent; border-bottom: 18px solid transparent } .breadcrumb-arrow li a:before { right: -10px; z-index: 3; border-left-color: #3bafda; border-left-style: solid; border-left-width: 11px } .breadcrumb-arrow li a:after { right: -11px; z-index: 2; border-left: 11px solid #2494be } .breadcrumb-arrow li a:focus, .breadcrumb-arrow li a:hover { background-color: #4fc1e9; border: 1px solid #4fc1e9 } .breadcrumb-arrow li a:focus:before, .breadcrumb-arrow li a:hover:before { border-left-color: #4fc1e9 } .breadcrumb-arrow li a:active { background-color: #2494be; border: 1px solid #2494be } .breadcrumb-arrow li a:active:after, .breadcrumb-arrow li a:active:before { border-left-color: #2494be } .breadcrumb-arrow li span { color: #434a54 } /* The responsive part */ .breadcrumb-arrow li a > * > div { /* With less: .text-overflow(); */ white-space: nowrap; overflow: hidden; text-overflow: ellipxsis; } .breadcrumb-arrow li a > *:nth-child(n+2) { display:none; } /* === For phones =================================== */ @media (max-width: 767px) { .breadcrumb-arrow li a > *:nth-last-child(-n+2) { display:block; } .breadcrumb-arrow li a > * div { max-width: 60px; } } /* === For tablets ================================== */ @media (min-width: 768px) and (max-width:991px) { .breadcrumb-arrow li a > *:nth-last-child(-n+4) { display:block; } .breadcrumb-arrow li a > * div { max-width: 100px; } } /* === For desktops ================================== */ @media (min-width: 992px) { .breadcrumb-arrow li a > *:nth-last-child(-n+6) { display:block; } .breadcrumb-arrow li a > * div { max-width: 170px; } }

$(document).ready(function(){ $(window).resize(function() { ellipses1 = $("#bc1 :nth-child(2)") if ($("#bc1 li a:hidden").length >0) {ellipses1.show()} else {ellipses1.hide()} }) });