Question

我正竭尽全力试图想出一种内联的方法。我知道您通常会隐藏一个孩子，然后以父母为目标。...

<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的段落有很多变化，但是大多数都因注入幽默或随机的单词而以某种形式发生了变化，这看起来似乎有些难以置信。如果您要使用一段

继续阅读...

Lorem Ipsum，您需要确保在文本中间没有隐藏任何令人尴尬的内容。互联网上的所有Lorem Ipsum生成器都倾向于根据需要重复预定义的块，这使得 ++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++

无论如何都可以进行切换删除切换文本并使其连续出现在一个连续的段落中，因此视觉效果将是...

*******************所需的输出低于************************** ************** Lorem Ipsum的段落有很多变化，但是大多数都因注入幽默或随机的单词而以某种形式发生了变化，这看起来似乎有些难以置信。如果要使用Lorem Ipsum的段落，则需要确保在文本中间没有隐藏任何令人尴尬的内容。互联网上的所有Lorem Ipsum生成器都倾向于根据需要重复预定义的块，从而使

这个想法是在小于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>

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

1 个答案: