登录 注册

请问大纲能实现跨行展示吗？

想问问有没有什么办法能够实现跨行展示，并且维持对应的标题缩进呢？

比如我这里的 h6 就没有展示完全

2f4e51b41fbba9a31be8a751ff79906d.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    25482 引用 • 105378 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    9750 引用 • 44351 回帖 • 87 关注
杭州 位置
150 悬赏
1 收藏
7 回帖
3
2
2
181 83 1 15 1 81

相关帖子

被采纳的回答
  • 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;  /* 标题内部底部的空间 */
}

    image.png

7 回帖
请问大纲能实现跨行展示吗？

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • wilsons • • 1
    付费者 捐赠者

    可参考 文档树标题显示不全 - wilsons 的回帖

    .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 引用
    1 操作
    wilsons 在 2025-03-13 11:31:14 更新了该回帖
  • Anastasia •
    付费者 作者

    佬我修改了一下代码如下，可以使用了。但是有一个问题，就是图片显示，如果一行还好，但是前后两个都要缩的话，就会叠在一起。我之前对大纲做过修改，代码块在图片下面附上。你可以看看有改进空间吗？（因为我希望同样版面尽可能显示更多的大纲标题行，所以改得比较紧凑。我看着这个问题好像是无解了，但是还是想问问你，或许有办法）

    /* 仅限大纲 PC 版样式 */
.sy__outline {
	.b3-list-item{
  	  line-height:100%; /* 90%都窄了 */
	}
	.b3-list-item__text{
  	  -webkit-line-clamp:inherit;
   	 word-break:inherit;
   	 overflow:inherit;
    	text-overflow:inherit;
	}
}

    image.png

    .b3-list-item {
    font-size: 12px ; /* 修改大纲列表项的字体大小 */
    margin-top: -7px ;  /* 修改上方的外边距 */
    margin-bottom: -7px ;  /* 修改下方的外边距 */
}
  • Anastasia •
    付费者 作者

    那个大纲修改的代码没弄全，下面是一级标题示例，我对 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 回复
  • 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;  /* 标题内部底部的空间 */
}

    image.png

  • Reader •
    付费者 支持者 捐赠者

    大佬辛苦，我目前也有一相关问题想咨询下大佬，还请大佬赐教。

    就是我想仅限在编辑器内输入#之后的标签完全显示，应该怎么写呢？我尝试用了.sy__tag，但那是标签树的 😭

    电脑上屏幕大这问题比较少，所以我创建了一个标签用作展示。在手机端这个问题比较严重

    image.png

    1 回复
  • wilsons • • 2 • 1 赞同 • 2 评论
    付费者 捐赠者 
    .protyle-hint:not(.fn__none) button[data-value^="%3Cspan%20data-type%3D%22tag%22%3E"] .b3-list-item__text {
    -webkit-line-clamp:inherit;
    word-break:inherit;
    overflow:inherit;
    text-overflow:inherit;
    word-wrap: break-word;
    line-height: 20px; /* 行高，官方默认是28px，可根据自己需要调整 */
}

    image.png

    1 回复
    1 操作
    wilsons 在 2025-03-13 14:33:31 更新了该回帖
    @Reader 准确来说，应该这样，见上面的新代码，改了一版。
    wilsons •
    好的，大佬就是大佬，我用第一版没发现错误，没想到还有改版。这改版我直接用上，很棒 👍。再次感谢大佬 🙏
    Reader •
  • Reader •
    付费者 支持者 捐赠者

    感谢大佬，完美符合 👍

请输入回帖内容 ...
Anastasia
杭州
回帖
31
 帖子
4
 积分
1049

近期热议

推荐标签 标签

  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖 • 1 关注
  • 倾城之链
    23 引用 • 66 回帖 • 168 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    9750 引用 • 44351 回帖 • 87 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖 • 2 关注
  • Oracle

    Oracle（甲骨文）公司，全称甲骨文股份有限公司（甲骨文软件系统有限公司），是全球最大的企业级软件公司，总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年，甲骨文已超越 IBM，成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 336 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用，而且功能强大。你无需专门学习，只需看上几眼，就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 636 关注
  • Quicker

    Quicker 您的指尖工具箱！操作更少，收获更多！

    37 引用 • 157 回帖
  • 周末

    星期六到星期天晚，实行五天工作制后，指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    22 引用 • 148 回帖 • 16 关注
  • RemNote
    2 引用 • 16 回帖 • 13 关注
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 612 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Word
    13 引用 • 41 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据（或者事件）流的 API。它组合了观察者模式，迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 181 关注
  • 国际化

    i18n（其来源是英文单词 internationalization 的首末字符 i 和 n，18 为中间的字符数）是“国际化”的简称。对程序来说，国际化是指在不修改代码的情况下，能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 4 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢？

    26 引用 • 233 回帖 • 1 关注
  • 书籍

    宋真宗赵恒曾经说过：“书中自有黄金屋，书中自有颜如玉。”

    78 引用 • 396 回帖
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 747 回帖 • 1 关注
  • IBM

    IBM（国际商业机器公司）或万国商业机器公司，简称 IBM（International Business Machines Corporation），总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国，是全球最大的信息技术和业务解决方案公司，拥有全球雇员 30 多万人，业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 141 关注
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖
  • 友情链接

    确认过眼神后的灵魂连接，站在链在！

    24 引用 • 373 回帖 • 1 关注
  • 爬虫

    网络爬虫（Spider、Crawler），是一种按照一定的规则，自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 832 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务，可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务，所以该项目也已经停止维护了！

    35 引用 • 468 回帖 • 764 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 1 关注

最新标签