Show "..." while displaying long text

In many web portals i had seen that when they are displaying long text in limited area, instead of setting the overflow attribute, they place a "..." in the middle of the text. If the user wants to refer to the detailed text, he can bring the mouse cursor on it and the whole text gets displayed. I want to implement this feature into my web page, but not sure how to do it. Whether this shall be done from HTML or CSS or JS ?

Any help will be highly appreciated.