登录 注册

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

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

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

2f4e51b41fbba9a31be8a751ff79906d.png

  • 思源笔记

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

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

    25471 引用 • 105347 回帖
  • Q&A

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

    9746 引用 • 44339 回帖 • 86 关注
杭州 位置
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

近期热议

推荐标签 标签

  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高，单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 107 关注
  • SMTP

    SMTP（Simple Mail Transfer Protocol）即简单邮件传输协议，它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 634 关注
  • 友情链接

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

    24 引用 • 373 回帖 • 1 关注
  • 外包

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

    26 引用 • 233 回帖 • 1 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    24 引用 • 241 回帖
  • 阿里云

    阿里云是阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务，以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    84 引用 • 324 回帖
  • Word
    13 引用 • 41 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 397 关注
  • 自由行
    • 1 关注
  • JWT

    JWT（JSON Web Token）是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准（RFC 7519），定义了一种简洁的，自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 22 关注
  • Kafka

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

    36 引用 • 35 回帖 • 1 关注
  • SSL

    SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 413 关注
  • SQLite

    SQLite 是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    150 引用 • 257 回帖
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖 • 1 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统，在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 2 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖 • 1 关注
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 400 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    58 引用 • 25 回帖 • 3 关注
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 8 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的，开放源码的分布式应用程序协调服务，是 Google 的 Chubby 一个开源的实现，是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 1 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    336 引用 • 324 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    29 引用 • 202 回帖 • 29 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言，在 20 世纪 90 年代中期由日本的松本行弘（まつもとゆきひろ/Yukihiro Matsumoto）设计并开发。在 Ruby 社区，松本也被称为马茨（Matz）。

    7 引用 • 31 回帖 • 248 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    54 引用 • 44 回帖
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 1 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    227 引用 • 476 回帖

最新标签