Skip to content

Instantly share code, notes, and snippets.

@jdanyow

jdanyow/index.html

Created January 5, 2022 18:48
Show Gist options
  • Save jdanyow/54198b4715b94ee789b10d7ae8b35a03 to your computer and use it in GitHub Desktop.
Save jdanyow/54198b4715b94ee789b10d7ae8b35a03 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@microsoft/[email protected]/dist/index.css" integrity="sha256-E2LVl9IuSYhXWHhuC1nbPvSpU0skk7qdAuH+30qeY/U=" crossorigin="anonymous">
<style>
/* debug */
li {
outline: 1px dotted magenta;
}
</style>
<style>
/* truncation */
.truncate {
display: inline-flex !important;
min-width: 0;
max-width: 100%;
}
.truncate-item {
min-width: 1ch;
max-width: fit-content;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<style>
/* breadcrumbs */
.breadcrumbs {
display: flex;
align-items: center;
}
/*.breadcrumbs-item {*/
/* min-width: minmax(max-content, 100px)*/
/*}*/
</style>
</head>
<body>
<h1>Hello world!</h1>
<nav>
<ul class="breadcrumbs">
<li class="breadcrumbs-item flex-shrink-0">
<button type="button">...</button>
</li>
<li class="breadcrumbs-item truncate">
<a class="truncate-item" href="#" title="Lorem ipsum sumit dolar">Lorem ipsum sumit dolar</a>
</li>
<li class="breadcrumbs-item truncate">
<a class="truncate-item" href="#" title="Little duffer">Little duffer</a>
</li>
<li class="breadcrumbs-item truncate">
<a class="truncate-item" href="#" title="Medium buddy ma dude">Medium buddy ma dude</a>
</li>
<li class="breadcrumbs-item truncate">
<a class="truncate-item" href="#" title="Lorem ipsum sumit dolar beefy boy beefy boy">Lorem ipsum sumit dolar beefy boy beefy boy</a>
</li>
</ul>
</nav>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment