如何在Quarto RevealJS演示中让文本超出幻灯片边距？

你可以通过自定义CSS类或者内嵌样式两种方式，单独控制指定幻灯片的边距，实现文本超出左侧、右侧或同时超出两边的效果，且不影响其他幻灯片。

方法1：自定义CSS类（适合批量复用） #

步骤1：引入自定义CSS文件 #

在演示文稿的YAML头部指定自定义CSS文件路径：

---
title:   mypres3
format:  revealjs
css: custom.css
---

步骤2：编写CSS规则 #

在同一目录下创建custom.css文件，写入以下样式（可根据需求调整百分比数值）：

/* 仅左侧超出边距 */
.slide-left-out .reveal .slides section {
  margin-left: -10%;  /* 控制向左延伸的距离 */
  width: 120%;        /* 扩展内容宽度，比默认宽20% */
}

/* 仅右侧超出边距 */
.slide-right-out .reveal .slides section {
  margin-right: -10%; /* 控制向右延伸的距离 */
  width: 120%;        /* 扩展内容宽度，比默认宽20% */
}

/* 左右同时超出边距 */
.slide-full-out .reveal .slides section {
  margin-left: -10%;
  margin-right: -10%;
  width: 120%;
}

步骤3：为目标幻灯片添加类 #

给需要调整的幻灯片标题添加对应的类即可：

# First slide {.slide-left-out}
i want my text to go OUT of margins. 
I want to be able to say go out ONLY on the right margin, or go out ONLY in the left margin. 

{{< lipsum 1 >}}

# Second slide
I want my text to stay INSIDE the margins. 

方法2：内嵌样式（快速临时调整） #

如果只是临时调整单张幻灯片，无需创建外部CSS文件，直接给幻灯片标题添加style属性即可：

# First slide {style="margin-left: -10%; width: 120%;"}
i want my text to go OUT of margins. 
I want to be able to say go out ONLY on the right margin, or go out ONLY in the left margin. 

{{< lipsum 1 >}}

# Second slide
I want my text to stay INSIDE the margins. 

• 要仅右侧超出，把margin-left替换为margin-right: -10%
• 调整百分比数值可控制超出幅度，比如-15%会让文本延伸范围更大

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