如何溢出文本做到這一點

我有多個元素，每個都有short和main divs。我想將short保持爲一行。現在，當內容超過一行時，它會移到下一行。然而，我想要的是讓它切掉剩餘的文字並像...那樣顯示點。這可能嗎？如何溢出文本做到這一點

<div class="elem"> 
    <div class="short"> Text should stay on one line </div> 
    <div class="main"> </div> 
</div> 

.elem{ 
    width:150px; 
}

理想的情況下，當用戶將鼠標懸停在標題和點...，他可以看到一個簡單的HTML彈出窗口或類似的東西全名。

2011-01-30 zmol

下面的CSS將實現您與CSS3支持的瀏覽器要達到的效果：

.elem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 150px; } 
.elem:hover { white-space: normal; }

請注意，當鼠標移過任何部分時，文本將展開，而不僅僅是省略號。

2011-01-31 00:02:23

您可以使用CSS的3 text-overflow: ellipsis;財產

編輯

對不起，我猜點擊快速發送上，並沒有閱讀完整的問題。使用該CSS屬性，您可以將文本剪裁到所需的寬度。

如果你想讓它出現在懸停你只需要增加div的寬度與懸停僞類，如：

.elem:hover { 
    width: 300px: 
}

2011-01-30 23:52:16 nunopolonia

由於某種原因，文本溢出沒有被拾取。這是一個官方的CSS屬性？ – zmol 2011-01-31 00:33:38

你用什麼瀏覽器？ – nunopolonia 2011-01-31 00:56:22

看看這篇文章：http://chetzit.com/blog/css/9.html – nunopolonia 2011-01-31 00:57:52

對於一個jQuery的解決方案，試試這個：http://jsfiddle.net/kA3uN/

$short = $('.short'); 
$short.html($short.html().substring(0,10) + " ...");

只要改變10到任何字符長度與佈局一致。不需要CSS3！：D

2011-01-31 00:41:23 jlmakes

回答