css - div内のテキストを展開および縮小します-autolength

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/のようになります。