登录 注册

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

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

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

2f4e51b41fbba9a31be8a751ff79906d.png

  • 思源笔记

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

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

    25125 引用 • 103584 回帖
  • Q&A

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

    9588 引用 • 43604 回帖 • 97 关注
杭州 位置
150 悬赏
1 收藏
7 回帖
3
2
2
154 82 1 11 60

相关帖子

被采纳的回答
  • 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 回复
  • 其他回帖
  • Reader •
    付费者 支持者 捐赠者

    感谢大佬，完美符合 👍

  • 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 •
    付费者 支持者 捐赠者

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

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

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

    image.png

    1 回复
  • 查看全部回帖
Anastasia
杭州
回帖
31
 帖子
4
 积分
1018

近期热议

推荐标签 标签

  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 367 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 56 关注
  • Rust

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

    58 引用 • 22 回帖 • 10 关注
  • V2Ray
    1 引用 • 15 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 164 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构，这是有关软件整体结构与组件的抽象描述，用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    143 引用 • 442 回帖
  • Git

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

    211 引用 • 358 回帖
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 295 关注
  • SOHO

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖 • 1 关注
  • Ubuntu

    Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的 Linux 操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖
  • CodeMirror
    2 引用 • 17 回帖 • 159 关注
  • 思源笔记

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

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

    25125 引用 • 103584 回帖
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 165 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 459 关注
  • Electron

    Electron 基于 Chromium 和 Node.js，让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目，兼容 Mac、Windows 和 Linux，它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 1 关注
  • IBM

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

    17 引用 • 53 回帖 • 146 关注
  • Lute

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

    28 引用 • 197 回帖 • 33 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

    28 引用 • 226 回帖 • 134 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合。

    7 引用 • 27 回帖
  • OpenStack

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

    10 引用 • 4 关注
  • CAP

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

    12 引用 • 5 回帖 • 636 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 642 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 5 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 248 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大，比用其他编程程序编辑的程序效率更高，因为它使用了 Linux/Unix 下的命令。

    124 引用 • 74 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 644 关注

最新标签