Tự động thêm "..." nếu văn bản mở rộng chiều rộng nhất định, nhưng hiển thị nó trên di chuột?

Question

Tôi đang cố gắng thực hiện những điều sau, có một số <div> có độ rộng nhất định, cho phép 30% và hơn 1 dòng văn bản, tuy nhiên, tôi muốn hiển thị ... nếu văn bản dài, chiều rộng của <div> sẽ thay đổi vì đó là thiết kế đáp ứng nên ... sẽ điều chỉnh cho phù hợp. Nhưng nếu một người di chuyển qua đó <div>, nó sẽ mở rộng chiều rộng của nó (nó sẽ được hoàn toàn vị trí, do đó, đi ra khỏi biên giới nhất định được cho phép.) Và hiển thị tất cả các văn bản, trên cùng một dòng.

Ví dụ:

This is text that fits 

This is text that doesn't fit inside ... 

This is text that doesn't fit inside, but is visible on hover. 

Không chắc chắn nếu nó có thể được thực hiện với tinh khiết HTML và CSS và trình duyệt làm việc chéo, có thể một số tràn ẩn sao lưu? hoặc JQuery, nếu nó không thể đạt được với bất cứ điều gì khác.

Answer 1

này có thể với pure CSS:

#test { 
    width: 50px; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

#test:hover { 
    overflow: visible; 
} 

http://jsfiddle.net/qyNUG/

Answer 2

Đây là một phiên bản css3 đó là dựa trên chiều rộng pixel. Nếu bạn có một vùng chứa có kích thước nhất định mà bạn đã muốn văn bản này hoạt động bên trong thì bạn có thể sử dụng chiều rộng: 100%; để làm việc bên trong nó.

jsfiddle

<p>This is text that doesn't fit inside, but is visible on hover.</p> 


p { 
    display: inline-block; 
    max-width: 200px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
p:hover { 
    max-width: none; 
}