登录 注册

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

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

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

2f4e51b41fbba9a31be8a751ff79906d.png

  • 思源笔记

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

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

    25233 引用 • 104061 回帖
  • Q&A

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

    9646 引用 • 43855 回帖 • 95 关注
杭州 位置
150 悬赏
1 收藏
7 回帖
3
2
2
159 82 1 13 63

相关帖子

被采纳的回答
  • 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 回帖
请问大纲能实现跨行展示吗？

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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 • • 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 •
  • 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 ;  /* 修改下方的外边距 */
}
  • 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
杭州
回帖
31
 帖子
4
 积分
1049

近期热议

推荐标签 标签

  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 119 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言，可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克（Rob Pike）说：我们之所以开发 Go，是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    498 引用 • 1395 回帖 • 249 关注
  • 爬虫

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

    106 引用 • 275 回帖
  • JetBrains

    JetBrains 是一家捷克的软件开发公司，该公司位于捷克的布拉格，并在俄国的圣彼得堡及美国麻州波士顿都设有办公室，该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境：IntelliJ IDEA。

    18 引用 • 54 回帖 • 4 关注
  • Windows

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

    227 引用 • 476 回帖 • 1 关注
  • ngrok

    ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 649 关注
  • Flume

    Flume 是一套分布式的、可靠的，可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 652 关注
  • 智能合约

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

    1 引用 • 11 回帖 • 1 关注
  • IPFS

    IPFS（InterPlanetary File System，星际文件系统）是永久的、去中心化保存和共享文件的方法，这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    21 引用 • 245 回帖 • 227 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。

    56 引用 • 85 回帖 • 1 关注
  • 钉钉

    钉钉，专为中国企业打造的免费沟通协同多端平台， 阿里巴巴出品。

    15 引用 • 67 回帖 • 287 关注
  • Pipe

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

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

    133 引用 • 1124 回帖 • 115 关注
  • OpenStack

    OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 5 关注
  • IDEA

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

    181 引用 • 400 回帖
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 76 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 7 关注
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    948 引用 • 1460 回帖 • 2 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖 • 1 关注
  • MySQL

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

    693 引用 • 537 回帖
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念，推广开源项目，为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • JSON

    JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。

    76 引用 • 258 回帖 • 626 关注
  • Notion

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

    10 引用 • 77 回帖 • 2 关注
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • Word
    13 引用 • 40 回帖
  • 支付宝

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

    29 引用 • 347 回帖 • 1 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 381 关注

最新标签