css 无限水平列表嵌套

经验分享
1

List-Nowrap.css

.HyperMD-list-line:not(
    .HyperMD-list-line-1,
    .HyperMD-list-line-2,
    .HyperMD-list-line-3,
    .HyperMD-list-line-4,
    .HyperMD-list-line-5,
    .HyperMD-list-line-6,
    .HyperMD-list-line-7),
.has-list-bullet *:not(li:has(.list-bullet))
{
    white-space: nowrap !important;
}

:not 部分排除了列表前七层, 使前七层可以正常换行, 日常使用应该不会超出这个范围, 超出了也可以继续加.HyperMD-list-line-8 排除

ob自带列表预览模式大概11层就开始将缩进符换行处理, 阅读模式也大概20层就开始崩, 如下:

image
image1308×2950 40.8 KB

并且文字过长也会被自动换行挤成几乎竖排显示:

image
image1320×1017 12.4 KB

启用css后:

image
image1920×1020 90 KB

编辑/预览/阅读模式都可无限嵌套, 文字也不会被挤换行了

我的笔记模式参考

虽然双链很棒, 但传统树状图的分类索引也很重要, ob的关系图谱交错杂乱且每次打开都变换位置, 不适合作为全局概念预览.

image
image1920×1020 267 KB

所以我单独建立一个笔记用多级无序列表作为总概念管理, 除了用时间戳命名的zk card外的笔记我都会在这个无序列表中加一个双链. 有的笔记时间久了名字忘了就容易"石沉大海", 建立一个树状图全局预览可以避免这种情况, 就算忘了名字也可以根据大致分类定位查找出来.

image
image1920×1020 120 KB

最近发现如果继续深入分解一个领域的知识, 列表层级肯定会嵌套得很多, ob自带的列表层级多了格式会崩, 就搞了下这个css

2 个赞
2

很好用啊，感谢！但是代码第五行那个 /* overflow-x:auto !important; */是干嘛用的呢

4

这个忘了删了, 是用来加水平滑动条的, 不过我试了反而会打乱格式就注释掉了, 删掉就行.

1 个赞
5

我有个主意，可以专门设置一个页面（比方说NONE），然后设置凡是引用到NONE页面的双链都不显示，且包含[[NONE]]页面的列表项都no-wrap，这样或许可以实现手动控制一些列表项不折叠？

6 
a[data-href="NONE"]
{
display:none !important;
}
li:has(a[data-href="NONE"])
{
white-space:nowrap !important;
}

这样的话，对于我们想要采取nowrap的列表项，我们只需要在段末加上[[NONE]]就可以了。

7

更正为：

a[data-href="NONE"]
{
display:none !important;
}
li:has(>a[data-href="NONE"])
{
white-space:nowrap !important;
}
8

补了下css伪类选择器的知识, 想出来另一种解决方案:

.HyperMD-list-line:not(
    .HyperMD-list-line-1,
    .HyperMD-list-line-2,
    .HyperMD-list-line-3,
    .HyperMD-list-line-4,
    .HyperMD-list-line-5,
    .HyperMD-list-line-6,
    .HyperMD-list-line-7),
.has-list-bullet *
{
    white-space: nowrap !important;
}

:not 部分排除了列表前七层, 使前七层可以正常换行, 日常使用应该不会超出这个范围, 超出了也可以继续加.HyperMD-list-line-8 排除

1 个赞
9

这个代码在阅读模式下好像会导致全部列表项都no wrap

10

Obsidian的列表项好像在一行内容多的时候要在内容头顶多空一行。。。我还以为是css的问题，太拉了