How to add linefeed/linebreak in details of Home layout

[arcqiufeng]

Is your feature request related to a problem? Please describe.

---
layout: home

features:
  - icon: 🛠️
    title: Simple and minimal, always
    details: Lorem ipsum...
  - icon:
      src: /cool-feature-icon.svg
    title: Another cool feature
    details: Lorem ipsum...
  - icon:
      dark: /dark-feature-icon.svg
      light: /light-feature-icon.svg
    title: Another cool feature
    details: Lorem ipsum...
---

I want to know how to add line break in details.

What I have tried:

---
details: Lorem <br />ipsum...
---

It doesn't work.

Then try:

---
details: Lorem&#13,ipsum...
---

It doesn't work.

Then:

details: |
  Lorem
  ipsum...

It doesn't work, too.

Then I tried JSON. The document says that Json also works.

VitePress also supports JSON frontmatter syntax, starting and ending in curly braces:

{
  "details": "Lorem\nipsum..."
}

It doesn't work, too.

Describe the solution you'd like

I want to know how to achive it.

Describe alternatives you've considered

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

That last one should work (using |), but we don't respect whitespace on .details, so just add something like this to CSS for now, it'll work:

.VPFeature .details {
  white-space: pre;
}

[you-hengh]

Maybe... #1913

[arcqiufeng]

Maybe... #1913

Thank you for your PR.

所以更新到最新版本后，是用加“\n"的方式吗？

[you-hengh]

Maybe... #1913

Thank you for your PR.

所以更新到最新版本后，是用加“\n"的方式吗？

你可以这样使用:

方法一 <br/>

features:
  - icon: 🧑‍🎓
    title: 如果善于提问<br/>你会厉害很多
    details: ''
    linkText: 阅读全文
    link: /article/blog/悟道/如果善于提问，你会厉害很多

方法二 <pre>

features:
  - icon: 🧑‍🎓
    title: "<pre>如果善于提问<\n>你会厉害很多</pre>"
    details: ''
    linkText: 阅读全文
    link: /article/blog/悟道/如果善于提问，你会厉害很多

注意方法二中的 title 需要携带引号(网页中不会展示引号)