想问问有没有什么办法能够实现跨行展示,并且维持对应的标题缩进呢?
比如我这里的 h6 就没有展示完全
想问问有没有什么办法能够实现跨行展示,并且维持对应的标题缩进呢?
比如我这里的 h6 就没有展示完全
代码本身没有问题呀。
这个这个只能根据你自己的情况去调节了,你 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; /* 标题内部底部的空间 */
}
.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"]
佬我修改了一下代码如下,可以使用了。但是有一个问题,就是图片显示,如果一行还好,但是前后两个都要缩的话,就会叠在一起。我之前对大纲做过修改,代码块在图片下面附上。你可以看看有改进空间吗?(因为我希望同样版面尽可能显示更多的大纲标题行,所以改得比较紧凑。我看着这个问题好像是无解了,但是还是想问问你,或许有办法)
/* 仅限大纲 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;
}
}
.b3-list-item {
font-size: 12px ; /* 修改大纲列表项的字体大小 */
margin-top: -7px ; /* 修改上方的外边距 */
margin-bottom: -7px ; /* 修改下方的外边距 */
}
那个大纲修改的代码没弄全,下面是一级标题示例,我对 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; /* 调整下方的外边距 */
}
代码本身没有问题呀。
这个这个只能根据你自己的情况去调节了,你 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; /* 标题内部底部的空间 */
}
.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,可根据自己需要调整 */
}
Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。
提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。
记录并分享人生的经历。
Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。
Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。
Quicker 您的指尖工具箱!操作更少,收获更多!
星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。
Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。
Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。
机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。
ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。
i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。
有空闲时间是接外包好呢还是学习好呢?
宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”
据说 99% 的性能瓶颈都在数据库。
IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。
服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。
确认过眼神后的灵魂连接,站在链在!
网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。
Latke 是一款以 JSON 为主的 Java Web 框架。
IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。
小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。
由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!
Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。
Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。