show/hide 仅淡出文本 css

Question

我想show/hide段落的一部分如下：

开始看起来像这样：

► This is the start of the paragraph with fading text
点击左边的“插入符号”后，它看起来像这样：

▼ This is the start of the paragraph with fading text no longer fading and the rest of the content shown.
点击下方的“插入符号”后，returns将：

► This is the start of the paragraph with fading text

正如我所想，这样的东西能行得通吗？

<div class="partial-text"><a href="">&#9658; This is the start of the paragraph with <style=”fadingCSS”> fading text</style></a></div>

<div class="full-text"><a href="">&#x25BC; This is the start of the paragraph with fading text no longer fading and the rest of the content shown.</a></div>

CSS 我需要帮助

Show/Hide合适div
删除所有 link 格式
淡入淡出样式CSS

我看过以下但无法拼凑：

Fading out text on overflow with css if the text is bigger than allowed

这有点超出我的能力，所以如果有人愿意提供帮助，我们将不胜感激！

Answer 1

<details> 标签不是结构性 HTML 元素，所以我认为用它 hack 真的不可能。

Here's an implementation 使用复选框和同级选择器，这样做的（众多）缺点之一是您必须同时定义摘要和完整段落。不过，这个或类似的 CSS only 应用程序并不是我真正推荐的。它们的可扩展性不是很好，依赖于特定的 HTML 结构，如果没有很好的文档记录，则有点难以理解。

Answer 2

好的，对于我的目的来说，我已经很好地工作了。我不得不修改 eMontilG 的代码，因为它不支持 WordPress "play nice"。下面是代码。

HTML

<label class="show-hide">
<input type="checkbox" class="input-checkbox"/>
<span class="less-text">
&#9658;This is the start of the paragraph with fading text...
</span>
<span class="more-text">
&#x25BC;This is the start of the paragraph with fading text no longer fading and the rest of the content shown.
</span>
</label>

CSS

.show-hide {
display: flex;
}
.input-checkbox {
display: none;
}
.less-text {
display: block;
}
.more-text {
display: none;
}
.input-checkbox:checked ~ .less-text {
display: none;
}
.input-checkbox:checked ~ .more-text {
display: block;
}
.input-checkbox:not(:checked) ~ .less-text {
display: block;
}
.input-checkbox:not(:checked) ~ .more-text {
display: none;
}

我知道这不是 "very extensible and relies on specific HTML structures" 正如 eMontilG 正确指出的那样，但它确实有效。

show/hide 仅淡出文本 css

show/hide fading text css only

show-hide