在div中展開和縮小文本 - 自動長度

Question

我在頁面中有一個自動寬度和CSS高度爲30px的div。

當我放大我想該div表現出更多的單詞和擴大的文本，如果收回它隱藏文字或一些字母和最後它把3分...喜歡在圖片中的窗口：

我怎麼能在CSS中這樣做，並需要JS？

Answer 1

你可以只用CSS做，如果你的創意在這裏是一個小提琴http://jsfiddle.net/HZKMd/

<div id="wrapper"> 
    <div id="text">here is some text. here is some text. here is some text. here is some text. here is some text. here is some text. here is some text. here is some text. here is some text. here is some text. here is some text. here is some text. here is some text. here is some text.</div> 
    <div id="ellipse"><strong>. . .</strong></div> 
</div>​ 

    #wrapper 
{ 
    position: relative; 
} 
#text 
{ 
    height: 30px; 
    line-height: 30px; 
    overflow:hidden; 
} 
#ellipse 
{ 
    height: 30px; 
    line-height:30px; 
    width:20px; 
    float:left; 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 5; 
    background: #fff; 
    padding: 0 3px; 
}​ 

或者這裏是使用jQuery隱藏和顯示橢圓http://jsfiddle.net/HZKMd/1/

的替代版本

添加此css類

.inner { 
    float: left; 
}​ 

，包括jQuery和添加這些功能

$(document).ready(function() { 
    if ($('.inner').width() >= ($('#wrapper').width() - 30)) { 
     $('#ellipse').show(); 
    } 
}); 

$(window).resize(function() { 
    if ($('.inner').width() >= ($('#wrapper').width() - 30)) { 
     $('#ellipse').show(); 
    } 
    else { 
     $('#ellipse').hide(); 
    } 
}); 

Answer 2

可以使用text-overflow屬性：https://developer.mozilla.org/en-US/docs/CSS/text-overflow。

所以基本上它可能看起來像這樣：http://jsfiddle.net/bbVD7/。