问题:在编辑视图的实时预览模式下列表中的多个连续段落如何折叠成一行,只显示首行,等鼠标悬停的时候在展开,这样就可以一定程度聚焦,需要某一级别的列表的详细内容时再展开。
预期效果:多个段落折叠成一行,而非仅仅是一个段落的多行
已尝试解决方案:通过自定义CSS加载如下片段(让ai帮忙写的),但是只能实现编辑视图下的实时预览模式下,一个段落的多行显示折叠成一行,但多行无法折叠成一行
/* 编辑视图实时预览模式与阅读视图模式多行段落显示首行,鼠标悬停展开 */
.cm-line, .markdown-preview-view p {
white-space: nowrap; /* Ensures text stays on one line */
overflow: hidden; /* Hides overflow text */
text-overflow: ellipsis; /* Adds an ellipsis to indicate truncated text */
max-height: 1.5em; /* Adjust based on your preferred line height */
padding-bottom: 5px; /* Adjusts space below lines */
padding-top: 5px; /* Ensures that top of text isn't cut off */
transition: max-height 0.2s ease-in-out; /* Smooth transition for expanding */
}
/* Avoid applying styles to headers in both modes to prevent cutting them off */
.cm-s-obsidian .HyperMD-header, .markdown-preview-view h1, .markdown-preview-view h2, .markdown-preview-view h3 {
white-space: normal;
overflow: visible;
max-height: none;
padding-top: 5px;
padding-bottom: 5px;
}
/* Expands the line on hover to show full content in both modes */
.cm-s-obsidian .cm-line:hover, .markdown-preview-view p:hover {
max-height: none; /* Removes height restriction on hover */
overflow: visible; /* Allows text to overflow on hover */
white-space: normal; /* Allows text wrapping on hover */
}