省略号以截断长文本

Question

I am using ellipsis concept to truncate a long text in my HTML. I have successfully managed to truncate the sentence but the "..." wont appear in my HTML. I use the following for the css

The output appears to be fine.. ie, for test test test test test test test test test the out put is test test test when i actually want it as test test test...

<div style="text-align:left; line-height: 20px; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; width: 99%;
            display : block;"> 

Answer 1

I'm not sure what you're asking, or what you are seeing, but the text will only be truncated if there's not enough space in the container. For example:

<style type="text/css">
div {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100px;
}
</style>
<div> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

http://jsfiddle.net/jS7ea/

Here I limited the div's width to 100px, and it displays just this:

Lorem ipsu...

On your example you have 99% width, so you'll only see the truncation if that's less than the actual content width (try resizing the browser window to check).

Answer 2

function shorten(text, maxLength) {
    var ret = text;
    if (ret.length > maxLength) {
        ret = ret.substr(0,maxLength-3) + "...";
    }
    return ret;
}

you can also use … … … … (Horizontal Ellipsis) instead of 3 dots

source: http://html5hub.com/ellipse-my-text