CSS3 property text-overflow: ellipsis

If we will make cuts sentence using the property of the ellipsis , the element div must have a style, such as the following.

Author: Adhy Suriady

div.ellipsis {
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

Note: The width div adjusted to our liking.
Examples of its application please see JsFiddle .

And note also, the property ellipsis will work on the element div which has the style display: block . By default, usually element div will have the style display: block .

But this does not apply when we added a link in the text with CSS style for the link as follows.

div.ellipsis a{
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

For example, please look at JsFiddle .

If this is the case as these examples ( text-overflow: ellipsis does not work), then we must ensure that the element div have the style display: block , then we should add the CSS style on top so it looks like this.

div.ellipsis a{
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block;
}

For example, please look at JsFiddle .

In some cases, you can also use the style display: inline-block to match the placement. Examples of its application please refer to the JsFiddle . Please zooming widgetnya column and note on the title track at the bottom. When a player touches the width of the title song, the title track will automatically become dots diujungnya.