Incomplete TOC sidebar

Support
1

Today, I saw the CSS file style using TOC sidebar in the forum, but after I used it, all the contents were in one line, and the parts beyond the length could not be displayed. The mouse hovering also had no effect. Could you continue to modify the CSS file to change the line automatically? If so, please try to modify it.Snipaste_2020-08-09_23-00-07

Attach CSS code

nav.table-of-contents>ul {
	background: var(--Sidebar-background);
	font-size: 13px;
	text-transform: uppercase !important;
	padding: 10px;
	margin: 0px;
	margin-bottom: 50px;
}

nav.table-of-contents ul {
    list-style-type: none
}

nav.table-of-contents li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

nav.table-of-contents li a {
    padding: 0;
}

@media all and (min-width: 920px) {
	nav.table-of-contents>ul {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 99;
		margin-right: 10px;
		border-radius: 4px;
		max-width: 15%;
		overflow:auto;
		height: 100%;
	}

	#rendered-md {
   	width: 82%;
	}
}
3

wish code here would be helpful for you, code comment in chinese。

:root {
  /*TOCsidebar的相关变量 , Toc SideBar variables definition */
  --tocsidebar-fontsize: 16px;  /*TocSideBar的字体大小，TocSideBar's fontsize*/
  --tocsidebar-bg: #313640;  /*TocSideBar的面板背景色 , TocSideBar's panel color*/

  --tocsiderbar-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);   /*TocSideBar的阴影设置 , TocSideBar's shadow */
  --tocsiderbar-radius:10px;        /*TocSideBar的圆角度 , TocSideBar's radius */


  --tocsiderbar-leftline: 1px solid rgba(255, 255, 255, 0.5);  /*TocSideBar左边竖线线颜色和不透明度，0为全透明，1为不透明, TocSideBar's left line for Classification befor link*/

  --tocsidebar-linkcolor: #FFFFFF;    /*TocSideBar链接颜色 , link color*/
  --tocsidebar-linkcolor-opacity: 0.8;   /*TocSideBar链接颜色的不透明度, link color's opacity */

  --tocsidebar-linkhovercolor: #E71B64;  /*TocSideBar链接悬停时的颜色 #E71B64-玫红色, link color when cursor hovering */
  --tocsidebar-linkhovercoloropacity: 1; /*TocSideBar链接悬停时的颜色的不透明度,  link color's opacity  when cursor hovering */
}

/**************************************************************************************************
 *  TABLE OF CONTENTS
 *  Based on the idea from here:
 *  -https://discourse.joplinapp.org/t/toc-as-the-sidebar/5979/8
 *  -https://discourse.joplinapp.org/t/toc-as-the-sidebar/5979/34
 *  -https://discourse.joplinapp.org/t/share-your-css/1730/192
 *************************************************************************************************/

nav.table-of-contents > ul {
  /*面板固定在右上角,  fix Toc panel on the right of the window , this panel is used for activing toc sidebar */
  position: fixed;  
  top: 0;
  right: 6px;
  z-index: 10;

  font-size: var(--tocsidebar-fontsize);  /*目录字体大小，可设置为16PX或small,16px比较合适， toc sidebar's fontsize, 16px is  better for our eyes*/
  height: 85%;
  padding: 5px;
  overflow: hidden;

  min-width: 20px;   /* 右侧面板宽度,也可用 width: 20px;设置在鼠标到达右侧20px范围内时激活TocSideBar, 20px means the Toc sidebar will be active when cursor within 20px on the right side of the window */
  background: none;  /* 面板无背景色填充 */
}

nav.table-of-contents ul {
  /*所有目录li的父框ul设置，即所有目录父框的设置*/
  list-style-type: none;
  margin-bottom: 0;
  margin-left: 8px;  /*分类距离tocsidebar边缘，8px*/
  margin-top: 0;
}

nav.table-of-contents > ul:hover {
  /*TocSideBar弹出时，背景底框的设置 所以用>只选择一级目录li的父框ul ，填充背景色和阴影以显示TocSideBar*/
  background-color: var(--tocsidebar-bg);
  border-radius: var(--tocsiderbar-radius);
  box-shadow: var(--tocsiderbar-shadow);
  overflow: scroll;
  width: auto;  /*根据内容自动调整宽度 ,但会导致字体加粗显示时跳动, Automatically adjust width according to content */
}

nav.table-of-contents > ul:hover li {
  display: list-item;
  min-width: 180px;    /*Toc SideBar最小宽度，Toc SideBar 's minimum width*/
}

nav.table-of-contents li {
  display: none;
  line-height: 1.8em;
  margin-bottom: 0;
  white-space: nowrap;
}

nav.table-of-contents > ul > li > ul li {
/*设置目录前的分类线，也可以这样(空格表示所有子孙代li)写 nav.table-of-contents ul li ul li */
  border-left: var(--tocsiderbar-leftline); !important;
}

nav.table-of-contents li a {
  color: var(--tocsidebar-linkcolor);
  opacity: var(--tocsidebar-linkcolor-opacity);
  padding: 5px;
}

nav.table-of-contents a {
  /*去掉下划线,remove  link's underline */
  text-decoration: none !important;
}

nav.table-of-contents li a:hover {
    /*悬停时，改变字体样式，change font style when cursor hovering*/
   color:  var(--tocsidebar-linkhovercolor);  /*link color when cursor hovering */
   opacity: var( --tocsidebar-linkhovercoloropacity);
}

1
11905×988 512 KB