使用 PUG 在多个 HTML 元素上拆分多行文本

Question

我正在创建一个哈巴狗模板，我正在尝试弄清楚如何输出多行文本但在锚标记上拆分。

我是哈巴狗的新手，所以我的知识仅限于一天。

header.pug

div.col-12
  a(href="https://somelink.com" target="_blank").
    Learn more
about safety precautions

期望的输出

<div class="col-12">
   <a href="https://somelink.com" target="_blank">Learn more</a>about safety precautions
</div>

但是我的 about safety precautions 文本一直显示在 </a> 标签内。

Answer 1

如果您想要内联文本，您可以使用不会打断段落的 span 元素：

div.col-12
  span
    a(href="https://somelink.com" target="_blank").
      Learn more
  span.
    about safety precautions

你也可以在哈巴狗中使用 pipe syntax:

div.col-12
  a(href="https://somelink.com" target="_blank").
    Learn more
  | about safety precautions

我个人更喜欢跨度，因为更多关注我的 Web 开发人员会明白发生了什么。不过，这两种方法都没有真正的负面影响。

Multi-Line text split on multiple HTML elements with PUG