How to make read more option with html/CSS? - html

Question

I have in some div long text and I would like to display only 3 lines from the text and when somebody click on the "read more", the whole text should be shown.
How to make this "read more" option in html/css?

Answer 1

One method would be to set the div's height to be three times its line-height, and set overflow: hidden.
You can then change its height to "auto" in the event handler for displaying the rest of the content:
document.querySelector('button').addEventListener('click', function() {
document.querySelector('#content').style.height= 'auto';
this.style.display= 'none';
});
body {
font: 14px verdana;
}
#content {
overflow: hidden;
height: 3.6em;
line-height: 1.2em;
width: 200px;
}
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<button>Read more</button>
You could also do this completely in CSS by using an adjacent sibling selector:
body {
font: 14px verdana;
}
#content {
overflow: hidden;
height: 3.6em;
line-height: 1.2em;
width: 200px;
}
#more:checked + div {
height: auto;
}
<label>
<input id="more" type="checkbox">Read more
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</label>

Answer 2

You can do this by first setting the height of the box to a specific size and keep the overflow hidden. Then use a button and js event to handle this .
<div id = "content">
your test will come here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<button type="button"
onclick ="document.getElementById('content').style.height='auto'">
Read more
</button>
</div>
Your css file should contain this.
#content {
overflow: hidden;
height: 3em;
line-height: 1em;
}

Answer 3

I was looking for read-more-possibility made only by html and css, too. The best idea for me was that with the adjacent sibling selector.
I changed what you read above in a certain way. First there is normal text. That stops at a senseful point, not counting the lines. Sometimes it can be one line, sometimes 4. After that I can expand it.
In css I wrote the first part, the second in html
body {
font: 20px verdana;
}
.content {
overflow: hidden;
height: 0em;
line-height: 1.2em;
width: 100%;
}
.more:checked + div {
height: auto;
}
<label>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Read more? Click at the box. <input class="more" type="checkbox">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</label>