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/

HTML简报中的“阅读更多”链接

1 个答案: