想问问有没有什么办法能够实现跨行展示，并且维持对应的标题缩进呢？
比如我这里的 h6 就没有展示完全
相关帖子
被采纳的回答
-
wilsons •付费者 捐赠者
代码本身没有问题呀。
这个这个只能根据你自己的情况去调节了，你 line-height 也不要调太小了，太小了空间不够，肯定会挤的。
总之，当挤的时候，要么字体做够小，要么就只能扩大行高了，这是一个平衡，具体各多大合适，看个人喜好。
不用调 margin-top 和 margin-bottom，这个很容易让他们挤到一块，仅调字体和行高就够了。两者都调，掌握不好，很容易自己都搞不清楚哪里在哪里起作用了。
这是我按你的代码调整的，你可以参考下（这个例子以 H3 为例）
/* 仅限大纲 PC 版样式 */ .sy__outline { .b3-list-item{ line-height:120%; /* 这里根据你自己的情况慢慢调整 */ } .b3-list-item__text{ -webkit-line-clamp:inherit; word-break:inherit; overflow:inherit; text-overflow:inherit; word-wrap: break-word; } } /* 一级标题 */ #sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h3"], /* 手机端 H3 字符 */ .sy__outline ul.b3-list.b3-list--background [data-subtype="h3"], /* 电脑端 H3 字符 */ #sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h3"] .b3-list-item__text, .sy__outline ul.b3-list.b3-list--background [data-subtype="h3"] .b3-list-item__text, /* 电脑端 H3 标题 */ #sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h3"] .b3-list-item__toggle, .sy__outline ul.b3-list.b3-list--background [data-subtype="h3"] .b3-list-item__toggle { /* 电脑端 H3 前的箭头 */ color: var(--custom-h1-color); font-size: 12px; /* 修改左侧大纲字体大小 */ padding-top: 2px; /* 标题内部顶部的空间 */ padding-bottom: 2px; /* 标题内部底部的空间 */ }
请输入回帖内容
...
- 其他回帖
-
.b3-list-item{ line-height:160%; } .b3-list-item__text{ word-wrap: break-word; -webkit-line-clamp:inherit; word-break:inherit; overflow:inherit; text-overflow:inherit; }同时支持文档树和大纲，如果限制手机版就加
.b3-list--mobile前缀如果仅限文档树，pc 版就用就用
.sy__file前缀，手机版就用[data-type="sidebar-file"]如果仅限大纲就用
.sy__outline前缀，手机版就用[data-type="sidebar-outline"]3 回复1 操作wilsons 在 2025-03-13 11:31:14 更新了该回帖 -
代码本身没有问题呀。
这个这个只能根据你自己的情况去调节了，你 line-height 也不要调太小了，太小了空间不够，肯定会挤的。
总之，当挤的时候，要么字体做够小，要么就只能扩大行高了，这是一个平衡，具体各多大合适，看个人喜好。
不用调 margin-top 和 margin-bottom，这个很容易让他们挤到一块，仅调字体和行高就够了。两者都调，掌握不好，很容易自己都搞不清楚哪里在哪里起作用了。
这是我按你的代码调整的，你可以参考下（这个例子以 H3 为例）
/* 仅限大纲 PC 版样式 */ .sy__outline { .b3-list-item{ line-height:120%; /* 这里根据你自己的情况慢慢调整 */ } .b3-list-item__text{ -webkit-line-clamp:inherit; word-break:inherit; overflow:inherit; text-overflow:inherit; word-wrap: break-word; } } /* 一级标题 */ #sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h3"], /* 手机端 H3 字符 */ .sy__outline ul.b3-list.b3-list--background [data-subtype="h3"], /* 电脑端 H3 字符 */ #sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h3"] .b3-list-item__text, .sy__outline ul.b3-list.b3-list--background [data-subtype="h3"] .b3-list-item__text, /* 电脑端 H3 标题 */ #sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h3"] .b3-list-item__toggle, .sy__outline ul.b3-list.b3-list--background [data-subtype="h3"] .b3-list-item__toggle { /* 电脑端 H3 前的箭头 */ color: var(--custom-h1-color); font-size: 12px; /* 修改左侧大纲字体大小 */ padding-top: 2px; /* 标题内部顶部的空间 */ padding-bottom: 2px; /* 标题内部底部的空间 */ } -
那个大纲修改的代码没弄全，下面是一级标题示例，我对 1-6 级标题都做了一样的修改。
/* 一级标题 */ #sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h1"], /* 手机端 H1 字符 */ .sy__outline ul.b3-list.b3-list--background [data-subtype="h1"], /* 电脑端 H1 字符 */ #sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h1"] .b3-list-item__text, .sy__outline ul.b3-list.b3-list--background [data-subtype="h1"] .b3-list-item__text, /* 电脑端 H1 标题 */ #sidebar [data-type="sidebar-outline"] ul.b3-list.b3-list--background [data-subtype="h1"] .b3-list-item__toggle, .sy__outline ul.b3-list.b3-list--background [data-subtype="h1"] .b3-list-item__toggle { /* 电脑端 H1 前的箭头 */ color: var(--custom-h1-color); font-size: 12px; /* 修改左侧大纲字体大小 */ padding-top: 0px; /* 标题内部顶部的空间 */ padding-bottom: 0px; /* 标题内部底部的空间 */ margin-top: -10px; /* 调整上方的外边距 */ /* 负值 margin 可以调整元素位置 */ margin-bottom: -10px; /* 调整下方的外边距 */ }1 回复 - 查看全部回帖
