I have a webpage with an elastic layout that changes its width if the browser window is resized.

In this layout there are headlines (h2) that will have a variable length (actually being headlines from blogposts that I don't have control over). Currently - if they are wider than the window - they are broken into two lines.

Is there an elegant, tested (cross-browser) solution - for example with jQuery - that shortens the innerHTML of that headline tag and adds ... if the text would be too wide to fit into one line at the current screen/container width?