html - "Read More"链接，在 HTML 通讯中

Question

我想在我的 HTML 时事通讯中插入一个链接“阅读更多...”，以在我的电子邮件中展开/隐藏我的新闻，其中包含更多信息(更多文本)。我如何才能在 Microsoft Outlook 上执行此操作。

我知道如何使用 CSS(下面提到的代码)在网页上执行此操作，但在电子邮件上这不起作用。

HTML:

<p class="read-more-wrap">
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.
    <span class="read-more-target">hidden lorem ipsum hidden lorem ipsum hidden lorem ipsum hidden lorem ipsum hidden lorem ipsum.</span>
</p>
<label for="post-1" class="read-more-trigger"></label>

CSS:

.read-more-state {
    display: none;
}

.read-more-target {
    opacity: 0;
    max-height: 0;
    font-size: 0;
    transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
    opacity: 1;
    font-size: inherit;
    max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
    content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
    content: 'Show less';
}

.read-more-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0 .5em;
    color: #666;
    font-size: .9em;
    line-height: 2;
    border: 1px solid #ddd;
    border-radius: .25em;
}

Answer 1

这是我能想到的最简单的解决方案:

CSS:

#mycheckbox:checked ~ .moretext {
  display: block;
}

.moretext{
  display: none;
}

#mycheckbox{
  display: none;
}
.showmore{
  cursor: pointer;
}

HTML:

<input type="checkbox" id="mycheckbox" />
<label for="mycheckbox" class="showmore">Toggle more</label>
<div class="moretext" >Some more text</div>

演示:https://jsfiddle.net/behxbd0t/