如何更改 WordPress 中文本的行距

适当的行距不仅仅关乎美观——它还会直接影响可读性、用户体验，甚至访客与内容的互动方式。无论你是在运营个人博客，还是管理高流量商业网站，在 WordPress 中优化文本间距都能显著提升网站的视觉结构。

在本指南中，我们将介绍在 WordPress 中更改行距的最有效方法，包括有代码和无代码方式，使用经典编辑器和区块（Gutenberg）编辑器。你还将学习如何应用自定义 CSS 以及排查常见的格式问题。

为什么行距很重要

• 提升可读性——尤其是在移动端
• 通过让长文本更易浏览来降低跳出率
• 增强不同主题和设备之间的设计一致性
• 符合 SEO 最佳实践（清晰、结构化的内容 = 更好的互动）

让我们来拆解如何控制它。

方法 1：在 Gutenberg 编辑器中调整行距

在默认区块编辑器（Gutenberg）中，你可以通过“Paragraph”区块设置或自定义 CSS 类来管理行距。

➤ 步骤：

• 在 WordPress 编辑器中打开文章或页面。
• 选择一个 Paragraph 区块。
• 在右侧边栏中找到 Typography > Line height 选项。
• 调整数值（例如 1.6、2、2.2）。

注意：如果该选项不可用，请继续查看下面的自定义 CSS（方法 3）。

方法 2：经典编辑器（TinyMCE）

Classic Editor 不包含直接的 line-height 选项。不过，你可以：

• 使用 Shift+Enter 进行手动换行（无间距）
• 使用像 TinyMCE Advanced（现为“Advanced Editor Tools”的一部分）这样的插件来添加间距控制

为了保持一致的样式，我们仍然建议通过 CSS 设置 line-height。

方法 3：自定义 CSS（完全控制的最佳实践）

此方法可提供精确控制，适用于所有区块和主题，并可避免布局偏移。

示例 1：所有段落的全局 line height

p {
  line-height: 1.8;
}

示例 2：仅应用于特定 class

.custom-text {
  line-height: 2.2;
}

CSS 插入位置：

• Appearance → Customize → Additional CSS，或
• 在子主题的 style.css 中，或
• 通过 Simple Custom CSS 之类的插件

方法 4：页面构建器（Elementor、WPBakery 等）

对于 Elementor：

• 编辑该区块或文本小工具。
• 在 Style → Typography 下，调整 Line Height 字段。
• 你可以将其设置为 em、px 或相对单位。

对于 WPBakery：

• 使用设计选项，或直接在行或列设置中添加自定义 CSS。

方法 5：移动端响应式行距

• 桌面端良好的行距在移动端可能会显得拥挤。大多数编辑器（包括 Gutenberg 和 Elementor）都支持响应式设置。始终：
• 在平板和移动端预览更改
• 为小屏幕设置稍大的 line-height（例如用 2 代替 1.6）
• 常见问题与修复

更新 CSS 后 line height 没有变化？

• 确保你的主题或插件没有覆盖样式。
• 尝试在 CSS 规则中使用 !important：

p {
  line-height: 2 !important;
}

在 Customizer 中可见更改，但前台没有生效？

• 清除你的网站缓存和浏览器缓存。
• 如果使用了缓存插件，请清除所有缓存。

总结