Using CSS, I want to display only two lines of text by default from a block of more text, \and when the user hovers on it, the rest of text to be displayed.
For example, this is what it should look like by default:
And this is what it should like like when the user hovers on it:
How can I implement that in CSS?
Just set fixed height on element and reset it to default on hover.
.special {
width: 100px;
height: 30px;
overflow: hidden;
}
.special:hover { height: auto; }<div class="special">
This is very long text This is very long text This is very long text This is very long text This is very long text This is very long text
</div>If you want animation as well, use max-height. Here’s a jsFiddle with example.
line-height:1.1em;height:2.2em;This solution creates a <p> tag and uses <span> inside. On the hover of <p>, show the span.
span {
display: none;
}
p:hover span {
display: block;
}<p>
This is the test which will be shown up normally
<span>
But if you will hover on the test then this text will also be there.
</span>
</p>The best way would be to use "overflow: hidden", then change the size of the container with the selection ":hover". Hope this helped
You can do it (by fixing height and extend it on hover with some transition) like this:
.extend {
background-color: cadetblue;
padding: 5px 5px 5px 5px;
border-radius: 4px;
height: 50px;
width: 25%;
transition: height 0.5s;
-webkit-transition: height 0.5s;
text-align: center;
overflow: hidden;
}
.extend:hover {
height: 145px;
}<div class="extend">
<p>Aliquet suspendisse imperdiet in, class sollicitudin condimentum ante odio! Litora semper arcu, auctor maecenas sodales.</p>
</div>
