How to make trim to row/title. using only CSS

This is Example how to make trim for a long title, with using only CSS.

by using this styles of CSS, at the end of the title will be added "..." when there isn't enough place to the text.

<style>
h1{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
</style>

you can see here in the example a long HTML H1 tag title.

<h1>this is very long long title with a lot of text this is very long long title with a lot of text this is very long long title with a lot of text <h1>

By using the css in the top, will get trim with "..." at the end of the text.

notes:<br>
1. Works in all Browsers (Internet Explorer 7 And Above).<br>
2. You can use it only if you want that the text will break after one row. it wont work, when you want to make the trim after 2 rows and above, only one row!

LIVE EXAMPLE:
Link