Multiline content in a DIV, display only the first line, if clicked, show all and contenteditable
this problem made me scratch my head
- how to use CSS to make a DIV display only the first line of a multiline content?
- How can I set a DIV height like one line, but actua开发者_如何学Clly holding multiple lines?
- 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
精彩评论