Can you cut off the displayed text in TOC if it goes beyond the available with?

[Andre601]

Right now the TOC displays the full Header text, which depending on the length results in it being put on two lines in total.

Example of this behaviour:

I now ask if there is some way (Maybe CSS?) to shorten the displayed text, so that it wouldn't go on a new line.
As an example, the above entries would now display like this:

/dh h center <hologram>
/dh h align <hologram> ...

Is this doable?

[lampensau]

I think there are several ways of achieving what you want:

1. Use custom CSS for the .md-ellipsis selector: text-overflow: ellipsis; white-space: nowrap;
2. Make use of the attr_list extension to define a custom heading text to be used in the TOC: ## Header {data-toc-label="custom heading"} (Ref: control the text in TOC mkdocs/mkdocs#2085)

[Andre601]

I applied the elipsis one, but weirdly enough does it not suffix the text with ... which according to the Mozilla docs should be the normal behaviour?

The CSS I applied:

.md-nav--secondary .md-nav__item {
    text-overflow: ellipsis;
    white-space: nowrap;
}

The result:

Maybe it has the wrong width set? Because by the looks of it is the full text there, but just not cut off at the right place...

[Andre601]

Small progress. I applied a > .md-nav__link to the CSS to target the link object and that now applies the proper cut off... Still not without the ... tho. And trying stuff like ellipsis ellipsis or ellipsis "..." also won't apply.

[Andre601]

At this point am I convinced that this is an issue with Material for MkDocs somehow (Or MkDocs itself), because within the Mdn Web Docs is the ellipsis property working as it should while in the nav it doesn't...

Tho, maybe it's because the Mdn docs use a p element while the nav is only li and a? Or perhaps the way the toc is generated simply ignores the CSS which would be weird...

[Andre601]

Yep... It's because the elements are a li and a and not a p element.... *sigh* Guess I'll need a different solution then?

[Andre601]

FINALLY got it to work...
The problem was, that the nav is set to a flex, so I had to change the display to a block for the .md-nav__link part, which resulted in this CSS snippet to use:

.md-nav--secondary li.md-nav__item > .md-nav__link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

This now properly cuts the text and suffixes it with a ....
I kinda wanted to use fade tho, but apparently is it no longer a thing despite what the Mdn docs say.

Either way, it works now and I'm happy.