如何使用默认主题在 VuePress 降价文件中强制换行？答案

【问题标题】：How to force break lines in VuePress markdown files, using default theme?如何使用默认主题在 VuePress 降价文件中强制换行？
【发布时间】：2020-07-14 21:54:03
【问题描述】：

如何使用默认主题在 VuePress 降价文件中强制换行？我有这样的标语： tagline: 'Lorem ipsum' 而且我不知道如何将它分成 2 行。

我已经尝试过VuePress tutorial中提到的解决方案，即

tagline: 'Lorem⋅⋅
ipsum'

（点代表空格）但它仍然以单行呈现。我正在使用 VuePress v1.4.0。

【问题讨论】：

标签： vuepress

【解决方案1】：

页面的"frontmatter" 是 YAML 格式，而不是 Markdown。

由于您可以将自定义 CSS 添加到您的 Vuepress 站点，因此您可以使用 CSS whitespace 属性来保留前端内容中的空白。（感谢answer）。

要专门针对包含 tagline 的元素，您可以将此 CSS 添加到位于 docs/.vuepress/styles/index.styl 的文件中：

.home .hero .description {
  white-space: pre;
}

您当然可以修改 CSS 以适应所有前端属性，可能只使用 .home .hero 甚至只是 .home。

然后你就可以像上面那样在 YAML 中使用空行了。

【讨论】：

一开始没用，因为VuePress在生成输出html文件时没有保留原来的空格，因为它们在markdown文件中定义，但是我做了更多的实验，这个版本终于奏效了- 使用您提供的 CSS：tagline: "Lorem\nipsum"。谢谢！
PS 我需要使用white-space: pre-wrap 将两个换行符保留在我需要的地方，并在其他地方自动换行长文本。