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