Did you know that you can navigate the posts by swiping left and right?

How to truncate a horizontal floating list

10 Mar 2017 . Web . Comments #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

Questions/Suggestions
As always, for questions or feedback, contact me or leave a comment.

Octocat by GitHubEdit this page on GitHub