如何在Quarto RevealJS演示文稿中让长文本适配单张幻灯片？

一、自动适配文本到幻灯片 #

方法1：用RevealJS内置的fit-text类 #

给需要适配的幻灯片内容套上::: {.fit-text}容器，RevealJS会自动缩放文本大小，让内容刚好放进单张幻灯片：

# This does not fit
::: {.fit-text}
- Topic 2
   - Level 1
   - Level 2
   - Level 3
- Topic 3
   - Level 1
   - Level 2
   - Level 3
- Topic 4
   - Level 1
   - Level 2
   - Level 3
:::

方法2：自定义CSS实现自动缩放 #

在你的styles.css文件里添加以下样式，可以全局或针对特定幻灯片调整：

/* 所有幻灯片内容自动适配视窗宽度 */
.reveal .slides section .content {
  font-size: clamp(1rem, 4vw, 2rem); /* 最小1rem，最大2rem，随视窗宽度自动变化 */
}

/* 仅给标记了.fit-slide类的幻灯片缩放 */
.reveal .slides section.fit-slide .content {
  transform: scale(0.8); /* 可根据实际内容调整缩放比例 */
}

然后给目标幻灯片加类：

# This does not fit {.fit-slide}
- Topic 2
   - Level 1
   - Level 2
   - Level 3
...

二、手动调整字号 #

方法1：内联样式直接改 #

给单个列表项或文本块加style属性，精准调整字号：

# This does not fit
- Topic 2
   - Level 1
   - Level 2
   - Level 3
- Topic 3
   - Level 1
   - Level 2
   - Level 3
- Topic 4 {style="font-size: 0.9em;"}
   - Level 1 {style="font-size: 0.8em;"}
   - Level 2 {style="font-size: 0.8em;"}
   - Level 3 {style="font-size: 0.8em;"}

方法2：CSS类批量调整 #

先在styles.css里定义不同字号的类：

.small-text { font-size: 0.8em; }
.smaller-text { font-size: 0.7em; }

然后给幻灯片内容套上对应类：

# This does not fit
::: {.small-text}
- Topic 2
   - Level 1
   - Level 2
   - Level 3
- Topic 3
   - Level 1
   - Level 2
   - Level 3
- Topic 4
   - Level 1
   - Level 2
   - Level 3
:::

方法3：调整全局基础字号 #

直接在Quarto的YAML配置里修改全局字号，所有幻灯片都会受到影响：

format:
    revealjs:
        embed-resources: true
        transition: slide
        font-size: 20px # 根据需求调整数值

内容的提问来源于stack exchange，提问作者Claudio