在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/。