You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何用CSS为Pandoc生成的HTML定义列表设置悬挂缩进单段落样式?

实现定义列表的悬挂缩进(Pandoc LaTeX转HTML)

嘿,我刚好解决过这个问题!要让Pandoc生成的<dl>定义列表里的描述部分实现悬挂缩进(也就是换行时自动缩进,保持单段落观感),只需要添加几行CSS就搞定了,完全不用改Pandoc的转换逻辑。

具体解决方案

直接给生成的HTML添加以下CSS样式:

/* 给整个定义列表设置基础间距和行高 */
dl {
  margin: 1.5em 0;
  line-height: 1.6;
}

/* 可选:让术语更突出 */
dt {
  font-weight: 600;
  margin-top: 0.8em;
}

/* 核心:实现悬挂缩进 */
dd {
  margin-left: 0;
  padding-left: 1.8em;
  text-indent: -1.8em;
}

/* 去掉Pandoc自动生成的<p>标签默认边距,保持单段落感 */
dd p {
  margin: 0;
}

逻辑解释

  • text-indent: -1.8em:把定义内容的第一行向左偏移1.8em,抵消掉padding-left的空间;
  • padding-left: 1.8em:给定义内容的所有行都留出左侧空间,这样第一行被拉回对齐后,后续换行的内容就会自动缩进1.8em,形成悬挂效果;
  • 去掉<dd><p>的默认margin,避免出现不必要的段落间距,保持单段落的紧凑感。

应用方式

你可以任选一种方式添加这段CSS:

  • 如果你用Pandoc自定义HTML模板,把这段代码加到模板的<style>标签里;
  • 直接在转换后的HTML文件头部插入<style>标签并放入上述代码;
  • 把CSS保存成单独的文件(比如styles.css),然后用Pandoc的参数指定:
    pandoc your-file.tex -o your-file.html --css styles.css
    

这样处理后,你的定义列表就会呈现出整洁的悬挂缩进效果,长定义换行时也能保持清晰的层级啦!

内容的提问来源于stack exchange,提问作者Greg Wilson

火山引擎 最新活动