登录 注册

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

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

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

2f4e51b41fbba9a31be8a751ff79906d.png

  • 思源笔记

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

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

    24822 引用 • 102095 回帖
  • Q&A

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

    9416 引用 • 42896 回帖 • 110 关注
杭州 位置
150 悬赏
1 收藏
7 回帖
3
2
2
129 79 1 6 43

相关帖子

被采纳的回答
  • 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 更新了该回帖
  • 其他回帖
  • 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 •
    付费者 作者

    那个大纲修改的代码没弄全，下面是一级标题示例，我对 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 回复
  • 查看全部回帖
Anastasia
杭州
回帖
29
 帖子
4
 积分
905

近期热议

推荐标签 标签

  • Sandbox

    如果帖子标签含有 Sandbox ，则该帖子会被视为“测试帖”，主要用于测试社区功能，排查 bug 等，该标签下内容不定期进行清理。

    428 引用 • 1250 回帖 • 596 关注
  • Scala

    Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 157 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖 • 2 关注
  • Lute

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

    28 引用 • 197 回帖 • 27 关注
  • 爬虫

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

    106 引用 • 275 回帖
  • SSL

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

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

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 13 关注
  • Telegram

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

    5 引用 • 35 回帖 • 2 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    132 引用 • 1115 回帖 • 120 关注
  • 智能合约

    智能合约（Smart contract）是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易，这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖
  • gRpc
    11 引用 • 9 回帖 • 90 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 272 关注
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 4 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    524 引用 • 4601 回帖 • 702 关注
  • Typecho

    Typecho 是一款博客程序，它在 GPLv2 许可证下发行，基于 PHP 构建，可以运行在各种平台上，支持多种数据库（MySQL、PostgreSQL、SQLite）。

    12 引用 • 67 回帖 • 445 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 18 关注
  • Q&A

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

    9416 引用 • 42896 回帖 • 110 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 60 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台，致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验，及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • BookxNote

    BookxNote 是一款全新的电子书学习工具，助力您的学习与思考，让您的大脑更高效的记忆。

    笔记整理交给我，一心只读圣贤书。

    1 引用 • 1 回帖 • 1 关注
  • 服务器

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

    125 引用 • 585 回帖
  • Tomcat

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

    162 引用 • 529 回帖 • 4 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 76 回帖
  • 脑图

    脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。

    31 引用 • 97 回帖
  • CAP

    CAP 指的是在一个分布式系统中， Consistency（一致性）、 Availability（可用性）、Partition tolerance（分区容错性），三者不可兼得。

    12 引用 • 5 回帖 • 637 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 678 关注

最新标签