Multiline content in a DIV, display only the first line, if clicked, show all and contenteditable

Question

this problem made me scratch my head

1. how to use CSS to make a DIV display only the first line of a multiline content?
2. How can I set a DIV height like one line, but actually holding multiple lines?
3. Can this be done without any javascript? I have to display the full content after click the DIV and edit the DIV by setting its attribute to contenteditable, it's best if I just use CSS selector to select non-first-line of the content and hide it.

Answer 1

Its easy:

.magic {
  height: 1em;
  overflow-y: hidden;
}

.magic:active {
  height: auto;
}

Make sure that instead of :active you're using suitable selector.

Height have to be equal to line-height. Which is not always equal to 1em.