Search code examples
r-markdownoverflowellipsistableofcontents

Ellipsis or indentation for overflowing text in Table of Contents Rmarkdown

My floating table of contents in Rmarkdown looks very messy now when the header overflows into the next line.

Can anyone help to truncate it with ellipsis but appears when mouse cursor hovers on it?

Alternatively, how can I adjust the indent of the overflowing line to align with 1.1? Thanks.

enter image description here

Solution

  • 2 years late to this one, but I've been bothered by the same issue recently and just worked out a fix. Not sure about the ellipsis, but to fix the text wrapping and get clean indents, you can include the following somewhere in your .Rmd file, like after the YAML heading or at the very end of the document:

    <style>

#TOC > ul.tocify-header > li:first-child {
  text-indent: initial;
  padding-left: 1em;
}

#TOC ul.tocify-subheader[data-tag="2"] > li.tocify-item {
  text-indent: initial;
  padding-left: 2em;
}

#TOC ul.tocify-subheader[data-tag="3"] > li.tocify-item {
  text-indent: initial;
  padding-left: 3em;
}

#TOC ul.tocify-subheader[data-tag="4"] > li.tocify-item {
  text-indent: initial;
  padding-left: 4em;
}
</style>

    You can add or subtract subheaders as needed depending on how many nested levels you want. Alternatively, if you feel this clutters your .Rmd, you could save it separately in a .css file in the same folder as your .Rmd and call it in your YAML, e.g.,

    title:
author:
date:
output:
   html output:
      css: header.css
      toc: true
      toc_depth: 4
      toc_float:
         collapsed: false