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

问题描述

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

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

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>标签内。

解决方法

如果要内联文本，可以使用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开发人员将了解发生了什么。但这两种方法都没有真正的负面影响。