pydata-sphinx-theme
pydata-sphinx-theme copied to clipboard
Published
20 hours ago •
pydata
pydata
use ellipsis to truncate breadcrumbs
WIP to address #1568. ~~Doesn't work. The below proof-of-concept with the same tag structure / depth of nesting does work, so I'm a bit at a loss as to where the crucial difference is.~~
If anyone finds it helpful, the below HTML reconstructs the basic node structure of our theme. As written it doesn't work, but seems to work fine as long as you remove display: flex from any one of the outer flex nodes (anything parent to the ul node).
<html>
<head>
<style>
body > div {
background-color: yellow;
}
.FLEX {
display: flex;
}
.UL {
display: flex;
}
.LI {
display: flex;
}
.LI::before {
content: ">";
}
.LI:last-child {
overflow:hidden;
}
.LI > span {
overflow-x: hidden;
text-overflow: ellipsis;
min-width: 0;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="FLEX"> <!-- bd-container -->
<div class="FLEX"> <!-- bd-container__inner -->
<main class="FLEX">
<div class="FLEX"> <!-- bd-content -->
<div class="FLEX"> <!-- bd-article-container -->
<div> <!-- bd-header-article -->
<div class="FLEX"> <!-- header-article__inner header-article-items -->
<div class="FLEX"> <!-- header-article-items__start -->
<div> <!-- header-article-item -->
<nav>
<ul class="UL">
<li class="LI">0123456789</li>
<li class="LI">ABCDE</li>
<li class="LI ACTIVE">
<span>abcdefg hijklmnop qrstuv wxyz</span>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
