HTML / CSS / наведите курсор / текст / изображение / скрыть / показать

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, но большинство из них претерпели изменения в некоторыхФорма, с помощью введенного юмора или случайных слов, которые не выглядят даже правдоподобно.Если вы собираетесь использовать отрывок

Keep Reading ...

из Lorem Ipsum, вам нужно быть уверенным, что в середине текста нет ничего смущающего.Все генераторы Lorem Ipsum в Интернете имеют тенденцию повторять заранее определенные фрагменты по мере необходимости, делая это ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

в любом случае, чтобы включить переключатель УДАЛИТЬ переключательтекст и иметь его в одном непрерывном абзаце, так что визуальный продукт будет ...

******************* требуемый результат ниже *************************************** Есть много вариантов пассажей Lorem Ipsum, но большинство имеютпретерпел изменения в той или иной форме из-за введенного юмора или случайных слов, которые не выглядят даже правдоподобно.Если вы собираетесь использовать отрывок из Lorem Ipsum, вы должны быть уверены, что в середине текста нет ничего смущающего.Все генераторы Lorem Ipsum в Интернете имеют тенденцию повторять заранее определенные фрагменты по мере необходимости, делая это

Идея состоит в том, чтобы скрыть часть абзаца на меньшем экране <900 пикселей и дать возможность продолжать просмотр или нет,но не желая нарушать макет или отображать на> 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>