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

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 actua开发者_如何学Clly 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.

---

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.

---

Question 1: you may be able to use the :first-line pseudo-element in your CSS.

div#mydiv {display:none}
div#mydiv :first-line {display:inline}

However, the spec does not list "display" as one of the properties which may be assigned to this pseudo-element, so this may or may not work, or may depend on the browser.

---

there was a related bug and it's already fixed

http://code.google.com/p/chromium/issues/detail?id=81783

---

Unfortunately Colin's answer above using the :first-line pseudo element doesn't work.. would have been nice as it's very elegant :)

There are some alternatives here: Show first line of a paragraph