Hiển thị văn bản cắt ngắn bình thường, nhưng hiển thị văn bản đầy đủ khi di chuột

Question

Tôi có một div có đoạn văn bản hoặc văn bản bên trong. Tôi muốn nó hiển thị vài từ đầu tiên bình thường, nhưng mở rộng để hiển thị toàn văn trên di chuột. Lý tưởng nhất, tôi muốn làm điều đó chỉ với CSS và không sao chép dữ liệu.

Đây là những gì tôi đã cố gắng: http://jsfiddle.net/SEgun/

Tôi không muốn các divs để di chuyển khi văn bản mở rộng, chỉ cho div 2 để mở rộng để hiển thị toàn bộ văn bản bao gồm div 3. Đây có phải là có thể? P.S. Tôi không quan tâm đến các trình duyệt chậm.

Answer 1

CSS dưới đây sẽ khiến div để "bù đắp" tất cả mọi thứ dưới nó vì vậy nó không đẩy bất kỳ nội dung xuống.

position: absolute; 
background-color:#FFF; 

Màu nền là quan trọng để bạn không thể nhìn thấy nội dung bên dưới.

Để đảm bảo mọi thứ vẫn ở cùng một nơi, bạn có thể cung cấp cho phần tử tiếp theo một lề trên cùng có cùng giá trị với chiều cao dòng. Dấu hiệu + là bộ chọn adjacent sibling.

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

DEMO

Answer 2

gì về điều này: http://jsfiddle.net/KGqnj/