Problem
I’m working on a TW-based page that includes breadcrumbs above the tiddler title, showing Document > Chapter > Section > Subsection > Sub-subsection or some initial subset of those. I want these to remain on one line, regardless of whether certain of the titles happen to be quite long. I have a technique that’s working reasonably well, using the CSS text-overflow: ellipsis; But I do this by restricting each section to max-width: 40% (Only two of these sections have dynamic sized text.) This means that at times the content is cut off by an ellipsis, even if there is enough total horizontal space on the line to show the whole thing. I’m wondering if anyone has a technique (TW or plain CSS) to address this. I want the various sections to start to shrink when there’s not enough total room, but I would prefer for them not to shrink if the total space is large enough for them all.
Demo
I don’t know how clear this is:
But a larger version is at
http://scott.sauyet.com/Tiddlywiki/WIP/Charter/video.gif.
Better, though, you can test it directly at
http://scott.sauyet.com/Tiddlywiki/WIP/Charter/v1/.
Open up one of the sections with longer titles, perhaps 606H, on a desktop browser and notice the ellipsis in the top breadcrumbs. Resize the page (possibly hiding the sidebar) to show how those change.
Code
The relevant CSS, applied to a section marked up as
<nav class="breadcrumbs">
<a class="tc-tiddlylink tc-tiddlylink-resolves" href="#Charter" title="Full Charter">Charter</a>
<a class="tc-tiddlylink tc-tiddlylink-resolves" href="#Chapter10" title="Chapter X. TRANSITION AND MISCELLANEOUS PROVISIONS"> > Chapter X. TRANSITION AND MISCELLANEOUS PROVISIONS</a>
<a class="tc-tiddlylink tc-tiddlylink-resolves" href="#Section1013" title="Section 1013. Transition —"> > Section 1013. Transition —</a>
<a class="tc-tiddlylink tc-tiddlylink-resolves" href="#Section1013J" title="Section 1013J"> > Section 1013J</a>
</nav>
(I know, I know, that should probably be an <OL>. I’ll get there!)
looks like this:
nav.breadcrumbs {
opacity: 50%;
a {
display: inline-block;
max-width: 40%;
height: 1.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
The breadcrumb-generating code is at $:/_/atc/core/ui/ViewTemplate/body/breadcrumbs
Question
Does anyone know of a technique to do this, that is to shrink more than one block with an ellipsis in such a manner that if there is enough total horizontal space, nothing will be collapsed?
The Wiki
This is really not a wiki, just a web page. I am using TiddlyWiki because of the ability to transclude various parts and show things at every level. OK, I’m also using it because of the Golden Hammer Syndrome; sue me! But in the end it’s a static site, simply delivered through the mechanisms of TW.
I’m trying to get my town to not depend on a scanned PDF version of the recently updated Town Charter, but to have a version which is searchable and linkable. This version was created by running OCR on that PDF, chopping the results into tiddlers, and wrapping a few templates around them. Because of the OCR and the cutting/pasting, there are likely still transcriptions errors. I’ll get to that too.
The main – read-only – version of this is at https://charter2024.andoverct.info/. In any version you can toggle read-only on and off with CTRL-SHIFT-/. (I think @pmario has mentioned that this isn’t available on German keyboards, and I’d love to hear alternative suggestions.)