Skip to content

Instantly share code, notes, and snippets.

@pjschreifels
Last active December 11, 2015 16:28
Show Gist options
  • Save pjschreifels/4627388 to your computer and use it in GitHub Desktop.
Save pjschreifels/4627388 to your computer and use it in GitHub Desktop.
#breadcrumb #coffeescript #truncate #ellipsis #bootstrap Truncate the last node in a breadcrumb and add an ellipsis. I use this with Twitter Bootstrap. Requires: ellipsis.js
# Fix the Breadcrumb display
$(document).ready ->
$("ul.breadcrumb").children("li:not(:last)").append "<span class='divider'>&nbsp;/&nbsp;</span>"
$("ul.breadcrumb").children("li:last").addClass "active"
# Add ellipsis to last item if it's too long
lessWidth = 0
liWidth = $("ul.breadcrumb").children("li:last").width()
$("ul.breadcrumb").children("li:not(:last)").each ->
lessWidth += $(this).outerWidth()
availableWidth = $("ul.breadcrumb").width() - lessWidth
if liWidth > availableWidth
theText = $("ul.breadcrumb").children("li:last").text()
$("ul.breadcrumb").children("li:last").text("")
$("ul.breadcrumb").children("li:last").css("width", availableWidth)
$("ul.breadcrumb").children("li:last").append("<div class='li-ellipsis'>"+theText+"</div>")
$('.ellipsis').ellipsis(false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment