Metin, belirli bir genişlikte uzandığında otomatik olarak "..." ibaresini ekleyin, ancak üzerine gelindiğinde gösterilsin mi?

Question

Aşağıdakileri yapmaya çalışıyorum, belirli genişliğe sahip, 30% ve 1 satırlık metin yazabiliyor, ancak ... metin uzunsa, <div> genişliği de değişecek duyarlı bir tasarım olduğu için ... buna göre ayarlanmalıdır. Ancak, bir kişi bu üzerinde gezinirse, genişliğini uzatmalıdır (kesinlikle konumlandırılacaktır, bu nedenle belirli sınırların dışına çıkılmasına izin verilir.) Ve tüm satırları aynı satırda göstermelidir.

Örnek:

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. 

Değil emin HTML ve CSS ve çalışma çapraz tarayıcı saf ile yapılabilir eğer, belki biraz taşma gizli yedek? veya başka bir şeyle elde edilemezse JQuery.

Answer 1

Bu pure CSS ile mümkündür:

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

#test:hover { 
    overflow: visible; 
} 

http://jsfiddle.net/qyNUG/

Answer 2

Bu piksel genişliği dayanan bir CSS3 versiyonudur. Eğer bu metni içinde çalışacak belli bir boyuta sahip bir kapsayıcınız varsa, o zaman genişlik kullanabilirsiniz:% 100; içinde çalışmak.

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; 
}