如何添加带有值的标签

【问题标题】：How to add tag with value如何添加带有值的标签
【发布时间】：2021-11-01 12:29:37
【问题描述】：

我很想知道如何在 Pug 中添加包含显示 Font Awesome 图标和动态值所需的另一个标签的标签。我试过这样：

    p!= "<i class=\"far fa-bell\"></i>"
        if val.i != null
            = " " + val.i
        else
            = " EXAMPLE TEXT"

我得到了这个输出：

<p><i class="fas fa-book" aria-hidden="true"></i>" 2"</p>

我想在图标和以下文本之间添加一个空格，但是 Pug 在输出中添加了引号，实际上我在网页上看不到任何结果。我可以在值 i 或示例文本之前添加更多空格，并且没有任何变化。有没有什么方法可以美化标签 i 的输出，后面跟着文字或值？

【问题讨论】：

标签： pug

【解决方案1】：

那不是有效的哈巴狗。

我会这样写，使用piped text来控制空格：

p
  i.far.fa-bell
  |
  |
  if val.i
    | #{val.i}
  else
    | Example Text

【讨论】：

你好，我试过你的代码，它的工作原理类似，但我不知道我的代码对 Pug 无效。谢谢你的澄清。不幸的是，它不会影响图标后文本的位置，因为 Pug 出于某种原因不会在 标记后添加空格。我已经用image 附加了 Pug 的输出。我可以使用 CSS 在图标和以下文本之间添加边距，但我认为可以避免这种方式。
在您的屏幕截图中，<i> 标记后面有一个空格。这不是你想要的吗？
是的，有一个空格，但我想试试两个或更多空格，因为图标和文本太靠近了。
那么您需要使用 CSS 或不间断空格。 HTMLcollapses默认多个空格合为一个。
感谢您的回复，我认为有必要为此使用 CSS。