css extends text on hover

Question

I need a css that display only two lines of codes by default,But when the user hover on it, The rest of text to be displayed .

For example :

It's what it should looks like by default :

And this is what It should be like when user hover on it :

As you can See, The rest of text is shown when user hover on it but By default only two lines of product name will be shown

What's the css trick for that ?

Thanks

What have you tried yourself? Where is the starting point in code? Please add a Minimal, Complete, and Verifiable example, see also http://stackoverflow.com/help/mcve — Roy, May 06 '16 at 07:30
Possible duplicate of [Combine :after with :hover](http://stackoverflow.com/questions/13233991/combine-after-with-hover) — Jurik, May 06 '16 at 07:34

Buksy · Answer 1 · 2016-05-06T08:42:19.110

6

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.

edited May 06 '16 at 08:42

answered May 06 '16 at 07:32

Buksy

11,571
9
62
69

2

Upvote. Just an additional suggestion, set the line-height with em's and then set the height to twice that of the line-height, to ensure two complete lines are shown initially. i.e. `line-height:1.1em;height:2.2em;` – Arleigh Hix May 06 '16 at 07:48
@ArleighHix nice one :) – Leo the lion May 06 '16 at 07:53

Leo the lion · Answer 2 · 2016-05-06T07:43:12.453

1

Well if you are looking for an easy answer then go with this fiddle

What i did is, created p tag and used span inside. On the hover of p show the span and you are done :)

HTML

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

CSS

span
  {
     display:none;
  }
p:hover span
  {
     display:block;
  }

edited May 06 '16 at 07:43

answered May 06 '16 at 07:34

Leo the lion

3,164
2
22
40

score 0 · Answer 3 · answered May 06 '16 at 07:35

0

The best way would be to use "overflow: hidden", then change the size of the container with the selection ":hover". Hope this helped

answered May 06 '16 at 07:35

pelomedusa

47
1
11

Shady Alset · Answer 4 · 2016-05-06T07:57:48.200

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>

css extends text on hover

4 Answers4