请问有什么办法使列表内的文字显示缩进线?

那我还是先这样看着吧,谢谢大佬,就不折腾这个啦,本来也是一个小需求,不是特别强烈哈哈!再次感谢!

我才发现你不是通过软换行来输入aaa\nbbb的, 你是直接在两个列表项之间插入了普通文本, 这个用法markdown也是不怎么支持的, 对普通文本缩进后, 你会发现带了缩进提示线的显示效果还不如不带呢, 而且也仅在编辑模式下bbb前面才有你要的缩进提示线.

image

image

我是在两个列表之间先使用回车换行换下去,然后按tab缩进进去达到这个效果的。我的tab格式设置的为4空格,所以在编辑模式下看起来都是对齐的。

我这么缩进的原因是想把这个列表作为一个小分块的标题使用的,每块标题然后写具体对应的详细内容。如果直接用header的话,那标题就会太多太细了。所以我就这么使用的 ,或者大佬你看有什么更合适的方式吗? :joy:

看了一下你的旧帖子,怪不得你会有这样的问题。

效果展示,为了明显一点这里的线调成了红色:

CSS 代码:

li:has( br) {position: relative;}
li:has( br)::after {
  content: "";
  position: absolute;
  border-left: var(--indentation-guide-width) solid var(--indentation-guide-color);
  bottom: var(--size-2-1);
  left: calc(-1 * var(--font-text-size));
  height: calc(100% - 1.6 * var(--font-text-size));
}

仅限你描述的情况起效,列表项一行太长自动折行的不会起作用。

不过先说好,这个线的位置和高度是我肉眼对齐和调整的,所以不能保证有别的问题。

再次感谢大佬,我用了,基本能满足我的需求!谢谢!因为我平时在列表里缩进用的多,所以好多地方都是这么来控制的。

看效果还不错,基本的块都包裹起来了,这样段落的递进关系会更强嘿嘿! :face_with_peeking_eye:

不过也还有些小问题,像三级标题obsidian也自动渲染了缩进线,和CSS的一叠加就变粗了;三级标题2里面用了callout,然后导致线也没有出来。不过基本场景都满足了,再次感谢大佬!

这种写法是不是过于自由了,我记得这么写 Callout 在预览模式可就是一个黑块啊。

image

好吧,那么首先把两个选择器都改一下:

li:has( br)li

(原 CSS 在 楼上

然后:

/*禁用阅读模式缩进参考线*/
ul::before, ol::before {
  display: none !important;
}

注意:仍然要保持下图这个选项开启!

效果展示:

碎碎念

(实在不建议这种写法)

可能我习惯用这种缩进来表示一些段落的从属关系了 :joy:这种大佬你有什么推荐的方式么?如果是用header的话标题又太细了!

顺便问下大佬请问完整的是改成下面这种吗?改成这种虽然可以callout可以显示线了,但是正常的列表显示的就有问题了。

image

li{position: relative;}
li::after {
  content: "";
  position: absolute;
  border-left: var(--indentation-guide-width) solid var(--indentation-guide-color);
  bottom: var(--size-2-1);
  left: calc(-1 * var(--font-text-size));
  height: calc(100% - 1.6 * var(--font-text-size));
}
ul::before, ol::before {
  display: none !important;
}

我把那个1.6放大到1.9,那个单行也有一小截线的问题消失了,多行的有线也能接受,再次感谢大佬!

这有个人和你情况一样,你可以参考。

我这个调整成1.9的时候,那个一小截线就没有了的,谢谢大佬!

大佬好像知道复现场景了,单行的内容不会复现,一个列表项的文字超过一行,这个列表项就会有线了(在没有缩进的情况下)。

li::after

是不是这个代表所有的列表项目,而不是包含缩进内容的呀?

大佬,可能我们没表达清楚。我是说的正常的场景使用,没有在列表项里用缩进加内容的。

我重新补了张图说明了一下,看大佬明白我的意思吗?

你的这个问题和“行数”无关,因为列表语法不写标号没有新块,对于列表就是没有新行。要控制样式的高度,自然不可能用行数来计算。


100% - 1.6 * var(--font-text-size)

这个式子的意思是全宽减去字体大小的 1.6 倍。

式子的变量之一,是全宽

用 CSS 实现你想要的样式,原理始终近似给一个”空了几格的列表项“加左侧边框。
也即“全宽”,取的是列表项“边框”的高度。
你可以写一个单行不换行有标号的列表项,然后将编辑器页宽无限调窄。
当你的页宽窄到这个单行也不得不折行显示时,
你会发现这个单行出现折行的位置前也会出现样式。

式子的变量之二,是行距

这里减去字体大小的倍数是 1.6,因为 Ob 默认行距是 1.5,整个式子表示全宽减去行距多一点。所以不管列表后面怎么写,首“行”都不可能出现样式,因为它的高度被完全减去了。

自然,如果行距改变,具体的数值也要跟着改变。

看你旧帖是改过行距的,所以当你根据你实际的行距,注意一下单位,计算一下改成对应的数值,就已经解决了问题。

大佬我用沙盒仓库试了下,还是有这个现象,沙盒仓库里我没调过行距的。我试着调大了这个值,只能减少一部分这个线的长度,还是会出来的。(图里的效果是增大到了3.0)

调数值是解决你这个问题的。


你这个不是问题,是正常起效的效果。

你想折行前面不显示样式,你用不带标号的缩进同样也不会显示样式,因为他们对于程序是同一个东西。

如果对样式要求高,还是老意见,规范写法。起码程序要先分辨出你是不同的块,才能谈应用不同的样式不是。

好吧,感谢大佬,我再研究研究,谢谢你!

其实编辑模式下的线,渲染出来就是我想要的,只要我缩进的地方就都有线了,只是预览模式它不这么渲染了 :joy:

Ob 编辑模式和阅读模式对于块的判定不同。

你想要按换行加线的样式,你感觉好像编辑模式这种分块挺方便,等你想用其他样式你就知道了。

好吧,那我就先不折腾了,先这么使用吧!谢谢大佬啦嘿嘿 :blush: