title: Multiline content in a DIV, display only the first line, if clicked, show all and contenteditable
body: <p>this problem made me scratch my head</p>
  
  <ol>
  <li>how to use CSS to make a DIV display only the first line of a multiline content?</li>
  <li>How can I set a DIV height like one line, but actually holding multiple lines?</li>
  <li>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 <code>contenteditable</code>, it's best if I just use CSS selector to select <strong>non</strong>-first-line of the content and hide it.</li>
  </ol>