Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
18 lines (12 sloc) 778 Bytes
layout section-type title category tags
post
post
How to truncate a horizontal floating list
Web
www
html
css
truncate
ellipsis
breadcrumb
navigation
english

If you want to implement a horizontal breadcrumb navigation to your webpage, there are a few possibilities. One of the recommended one is using an unordered list and let these entries float.

But what if this breadcumb is too large to fit into the layout-container? We want to truncate those entries then, adding a small ellipse (…) at the end to show that there is still some more content.

This is possible with just a few lines of CSS I want to demonstrate here: Live-Demo with Code

{% gist Anheledir/dc337e85ce9d1d47ed9d1e7323c5e096 %}