CSS3 Tip 33: Use text-overflow

text-overflowAttribute specifying how text should be displayed when it overflows the containing element. You can set the text to be clipped after overflow, to show an ellipsis (...) or to show a custom string (no browser support).

.xx{
    text-overflow: ellipsis | clip | string;
}

• ellipsis : Display ellipses ...to represent trimmed text.

• clip: cut text.

• string: A custom string to represent the trimmed text. Not all browsers support it.

text-overflowAttribute specifying how text should be displayed when it overflows the containing element. After overflow, text can be clipped, an ellipsis (...) can be displayed, or a custom string can be displayed.

It needs to be used with the following two attributes:

white-space: nowrap;
overflow: hidden;

Common scenarios:

1. A single line of text is out of bounds and an ellipsis appears.

.box{
    width: 150px;
    height: 30px;
    line-height: 30px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

 2. Multi-line text is out of bounds, ellipsis appears.

This is really amazing. After testing, both Chrome and Firefox support this effect.

.box{
    width: 150px;
    line-height: 30px;

    display: -webkit-box;
    -webkit-line-clamp: 2;   /* 控制行数 */
    -webkit-box-orient: vertical; 
    overflow: hidden;
    text-overflow: ellipsis;
}