सामान्य रूप से कटा हुआ पाठ दिखाएं, लेकिन होवर

Question

पर पूरा टेक्स्ट दिखाएं मेरे पास एक अनुच्छेद या इसके अंदर पाठ के साथ एक div है। मैं इसे सामान्य रूप से पहले कुछ शब्द दिखाना चाहता हूं, लेकिन होवर पर पूरा पाठ दिखाने के लिए विस्तारित हूं। आदर्श रूप से, मैं इसे केवल सीएसएस और डेटा डुप्लिकेशन के बिना करना चाहता हूं।

यह मैं क्या कोशिश की है है: http://jsfiddle.net/SEgun/

मैं divs ले जाने के लिए नहीं करना चाहती जब पाठ, फैलता केवल div 2 के लिए कवर div 3. इस संभव है पूरा टेक्स्ट दिखाने के विस्तार करने के लिए? अनुलेख मुझे मंद ब्राउज़र के बारे में परवाह नहीं है।

Answer 1

सीएसएस नीचे तो यह किसी भी सामग्री को नीचे धक्का नहीं है div इसके नीचे सब कुछ "को कवर" का कारण होगा।

position: absolute; 
background-color:#FFF; 

पृष्ठभूमि रंग महत्वपूर्ण है ताकि आप नीचे दी गई सामग्री को न देख सकें।

यह सुनिश्चित करने के लिए कि सबकुछ एक ही स्थान पर रहता है, आप अगले तत्व को लाइन ऊंचाई के समान मूल्य के शीर्ष मार्जिन दे सकते हैं। + साइन adjacent sibling चयनकर्ता है।

div { 
    line-height: 20px; 
} 
#data:hover+div { 
    margin-top:20px; 
} 

DEMO

Answer 2

क्या इस बारे में: http://jsfiddle.net/KGqnj/