多行的內容，只顯示第一行，如果點擊，顯示所有與CONTENTEDITABLE

Question

這個問題讓我抓我的頭

1. 如何使用CSS來製作一個DIV只顯示的第一行多行內容？
2. 如何設置DIV高度，如一條線，但實際上保持多行？
3. 這可以做到沒有任何JavaScript？點擊DIV後，我必須顯示完整內容，並通過將其屬性設置爲contenteditable來編輯DIV，如果我只是使用CSS選擇器來選擇非 - 內容的第一行並將其隱藏，那麼最好。

Answer 1

有一個相關的錯誤，它已經固定

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

Answer 2

問題1：你可以是能夠使用:first-line僞元素在你的CSS。

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

然而，該規範沒有列出「顯示」作爲可以被分配給此僞元素的屬性之一，所以這可能或可能不正常工作，或可以依賴於瀏覽器。

Answer 3

不幸的是科林的回答上面使用：第一線僞元素不工作..本來不錯，因爲它是非常優雅:)

這裏有一些選擇： Show first line of a paragraph

Answer 4

它很容易：

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

.magic:active { 
    height: auto; 
} 

確保使用合適的選擇器而不是:active。

高度必須等於行高。這並不總是等於1em。