HTML/CSS/悬停/文本/图像/隐藏/显示

Question

我正在绞尽脑汁想办法以内联方式执行此操作。我知道你通常会隐藏一个 child ，然后以 parent 为目标进行表演......

<p class="demo_text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the </p>
<p class="text_toggle"> Keep Reading...</p>
<p class="text_hidden">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the</p>

在 css 中:你会去

.text_hidden{
display: none
}
.text_toggle:hover .text_hidden{
display: block
}

这会在段落中创建一个中断...

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Lorem Ipsum 的段落有很多变体，但大多数都以某种形式进行了更改，通过注入(inject)幽默或随机单词，看起来甚至一点都不可信。如果你要使用一段话

继续阅读...

对于 Lorem Ipsum，您需要确保文本中间没有隐藏任何令人尴尬的内容。 Internet 上的所有 Lorem Ipsum 生成器都倾向于根据需要重复预定义的 block ，使其成为 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

有没有办法在切换时删除切换文本，让它在一个连续的段落中流动，这样视觉产品就会……

********************* 下面需要输出 ************************* *************** Lorem Ipsum 的段落有很多变体，但大多数都以某种形式进行了更改，通过注入(inject)幽默或随机单词，看起来甚至一点都不可信。如果你打算使用 Lorem Ipsum 的段落，你需要确保文本中间没有隐藏任何令人尴尬的内容。 Internet 上的所有 Lorem Ipsum 生成器都倾向于根据需要重复预定义的 block ，使其成为

想法是在 < 900px 的小屏幕上隐藏部分段落，并提供是否继续查看的选项，但不想破坏布局或在 > 900 时显示。

有什么想法吗？

Answer 1

用段落元素包裹所有内容，并为 .text_hidden 和 .text-toggle 使用跨度:

.text_hidden {
  display: none;
}

.text_toggle:hover+.text_hidden,
.text_hidden:hover {
  display: initial;
}

<p class="demo_text">
  There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
  you need to be sure there isn't anything embarrassing hidden in the middle of text. All the
  <span class="text_toggle"> Keep Reading...</span>
  <span class="text_hidden">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the</span>
</p>