CSS - how to make content fit to the width/height of paragraph?

Question

I have a paragraph in HTML using the p tag. Now i want to change the height and width of this paragraph so it only shows the begining (head) of the paragraph and then when i hover over it, it displays the full paragraph. How do I do this using CSS?

NOTE** I CANNOT CHANGE THE HTML CODE SO I MUST ONLY PLAY AROUND WITH CSS..

Answer 1

The following base code will work for you, you can modify it to enable CSS animations etc. as necessary.

p {
  // Put whatever height you want here, we're using max-height here so that
  // paragraphs that are smaller than this don't get extra blank spacing.
  max-height: 20px;

  // Hide the extra content
  overflow: hidden;
}

p:hover {
  max-height: none;
}

Answer 2

It's better if you use JavaScript for such stuff, but if you insist on CSS, here you go.

p{
    border: solid;
    height: 10px;
    overflow:hidden;
}
p:hover{
    height: 100%;
}

A small Example here