Abnormal rendering of TableOfContents list that has happened only 1 time out of 600 posts

support
21

The original post has all of those details. It includes the raw CSS and HTML output. There is no Markdown generating the table of the contents because Hugo generates it based on headings that exist in your Markdown. I included the partial for that. I also included all of those headings in the grep output.

The issue is still unresolved. I applied a CSS change to fix something based on Hugo changing the functionality of either the HTML or CSS when it runs --minify. Minification shouldn’t change functionality but in this case it is.

Given the minified CSS was directly tested and had no impact, it was likely the minified HTML that was the issue. I didn’t know (and still don’t know) how a targeted CSS rule for an li could affect a parent ulwhen there’s extra or less whitespace outside of any HTML tag.

Yep, when I converted my 11 year old blog from Jekyll to Hugo I focused on everything but the CSS, I left the original design. I will eventually make a new design, when time permits.

22

When the HTML isn’t minified, the browser uses the whitespace between the list items as a natural wrapping point when the window gets too narrow.

When you minify, that whitespace disappears. Because standard inline elements rely on whitespace to wrap, the browser is forced to treat the entire list as one continuous string of text. As a result, it will either awkwardly wrap the line inside your link text, or it won’t wrap at all, causing the text to overflow the screen.

This isn’t a minification bug; it’s just how browsers handle standard inline text wrapping.

To get the desired result do one of the following:

  1. Do not minify

  2. Change your CSS either per @chrillek’s suggestion, or something like this:

    .post-quick-jump {
  font-size: 16px;
  margin-bottom: 25px;
  padding: 10px;
  background-color: #e0f5ff; }

.post-quick-jump strong {
  margin-right: 8px;
}

.post-quick-jump a {
  text-decoration: underline;
  color: #2774c8;
  display: inline-block;
  white-space: nowrap; }

#TableOfContents {
  display: inline;
  padding-bottom: 0;
}

#TableOfContents ul {
  display: inline;
  padding-left: 1px;
  padding-bottom: 0;
}

#TableOfContents li {
  display: inline;
  list-style-type: none;
}

#TableOfContents li:not(:last-child) a {
  margin-right: 7px;
  padding-right: 10px;
  border-right: 1px solid #85bdfa;
}
23

Note that I just modified the CSS above.

Try it:

git clone --single-branch -b hugo-forum-topic-57231 https://github.com/jmooring/hugo-testing hugo-forum-topic-57231
cd hugo-forum-topic-57231
hugo server --minify
24

Thanks for the explanation, it makes sense now.

It works, alternatively adding only this works too:

#TableOfContents ul li ul li {
  display: inline-block;
}

One takeaway from this is I’ll be minifying in development to help prevent mismatches like this happening in the future.