如何在 HTML 电子邮件模板中添加可隐藏的段落

Question

我正在创建其中包含变量的电子邮件模板。变量将在运行时被替换为两组不同值中的一组，如下所示。第一组在中间有一个额外的段落，其中嵌入了 link。我遇到的问题是让第二段和第三段在组合时具有正确的间距。有什么方法可以从 p3 创建底部边距以在第二段和第三段之间创建 space 吗？

这是我正在使用的模板。模板

<style type="text/css">
body{
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    background-color: #f5f5f5;
}
.body-div{
    width: 560px;
    background-color: #ffffff;
    padding: 10px 20px;
    margin: 0 auto;
}
.below-spacing, .p3{
    padding-bottom: 20px;
}

.above-spacing{
    padding-top: 10px;
}

.p1:empty, .p2:empty, .p3:empty{
    display:none;
}
</style>
<body>
    <div class="body-div">
        <div class="below-spacing above-spacing">{{FirstParagraph}}</div>
        <div><span class= "p1">{{MidParagraphPart1}}</span><a href="https://www.google.com"><span class="p2">{{MidParagraphPart2}}</span></a><span class="p3">{{MidParagraphPart3}}</span></div>
        <div>{{LastParagraph}}</div>
    </div>
</body>
</html>

示例 1 在这个例子中，我将值插入到所有变量中，显示所有三个段落和其中包含文本的 link。请注意第二段和第三段在浏览器中如何 space 不正确。 CSS 同上。

</style>
<body>
    <div class="body-div">
        <div class="below-spacing above-spacing">Section of text #1 Lorem ipsum dolor sit amet, dolor porta wisi, sed et dui lacinia facilisi tincidunt hendrerit, risus sodales ipsum semper nulla sit, sed cursus sapiente, aliquam tincidunt sed leo arcu in.</div>
        <div><span class= "p1">Section of Text #2, Part #1. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </span><a href="https://www.google.com"><span class="p2">(Part #2) Link text</span></a><span class="p3"> Part #3 Lorem ipsum dolor sit amet, et eget. Lorem ipsum dolor sit amet, et eget.</span></div>
        <div>Section of text #3 Lorem ipsum dolor sit amett, at consectetuer id sollicitudin amet posuere. </div>
    </div>
</body>
</html>

示例 2 在这个例子中，我只用文本替换了第一个和最后一个变量。中间一段被隐藏，两段都 spaced 正确。 CSS 同上。

</style>
<body>
    <div class="body-div">
        <div class="below-spacing above-spacing">Section of text #1 Lorem ipsum dolor sit amet, dolor porta wisi, sed et dui lacinia facilisi tincidunt hendrerit, risus sodales ipsum semper nulla sit, sed cursus sapiente, aliquam tincidunt sed leo arcu in.</div>
        <div><span class= "p1"></span><a href="https://www.google.com"><span class="p2"></span></a><span class="p3"></span></div>
        <div>Section of text #3 Lorem ipsum dolor sit amett, at consectetuer id sollicitudin amet posuere. </div>
    </div>
</body>
</html>

Answer 1

span 是 inline 标签。我们不能为它设置保证金。您应该将 span 设置为 display: inline-block。

.p1,
.p2,
.p3 {
  display: inline-block;
}

要隐藏第二个 span，您应该为其添加空的 class：

<span class="p2 empty></span>

CSS:

.p1.empty,
.p2.empty,
.p3.empty {
  display: none;
}

Answer 2

我在您的 HTML 代码中发现了一些错误。

您的第一个跨度在 class 名称之前丢失。
您的第二个跨度没有 class。也许添加你想要的 p2。

我不确定是否理解了这里的整个问题，但是你为什么要放一个

display: none;

到你的跨度？尝试

display: inline-block;

另一种解决方案是删除 span 并添加

<p>

而是将其添加到您的 css

p{
   margin-bottom:20px; //can add a class p3 to your p.
}

Answer 3

试试这个：

将此添加到 css 的末尾。
```
.hidden{
    display: none;
}
```

然后将可注入变量Hidden添加到您想要按需隐藏的任何元素。

<div class="below-spacing {{Hidden}}"><span>{{Paragraph2}}</span><a href="https://www.google.com"><span>{{Paragraph3}}</span></a><span>{{Paragraph4}}</span></div>

为变量 {{Hidden}} 注入 "hidden"（无双引号）。这将以正确的间距隐藏段落。
您可以删除 p1、p2 和 p3 类。

如何在 HTML 电子邮件模板中添加可隐藏的段落

How to have a hidable paragraph in an HTML email template

html

css

html-email