HTML / CSS / hover / text / image / hide/show

Question

I'm banging my head trying to think of a way to do this inline. I know you would normally hide a child, and then target the parent for show....

<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>

in the css: you'd go

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

this creates a break in the paragraph...

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 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

Keep Reading...

of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

is there anyway to on toggle REMOVE the toggle text and have it flow in one continuous paragraph so the visual product would be ...

******************* desired output below *************************************** 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 the text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the

The idea is to hide part of the paragraph on smaller screen < 900px, and give the option to keep viewing or not, but not wanting to disrupt the layout or display at > 900.

any ideas?

Answer 1

Wrap everything with a paragraph element, and use a span for .text_hidden and .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>