css - 扩展和缩小 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/。