Question

I have in a page a div with an auto width and 30px height in CSS.

When I enlarge the window I want that div to show more words and expand text, and If take back it hides words or some letters and in the end it put 3 points … Like in the picture :

How can I do like this in CSS and need to JS ???

Answer 1

You can do it with just css if you get creative here is a fiddle 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;
}​

or here is an alternate version using jquery to hide and show the ellipse http://jsfiddle.net/HZKMd/1/

add this css class

.inner {
    float: left;
}​

and include jquery and add these functions

$(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();
    }
});