Solving the problem with long headers

You have probably seen more than once that in the column, for example, with the names of the last topics on the forum, sometimes unpleasant metamorphoses occur. It looks like this (with your permission I pretend a little :)).

* Problems with the new computer ...
* Why float: le doesn't work ...
* How to decide to marry for ...

It's untidy, right? There are a lot of solutions, but another one came to my mind (maybe not just me?).

Now we find out what we need from the tools:

1. ABCDEFGHIJKLMNOPQRSTUUVWXYZ;
2. png'shka (it is located here );
3. PNG human processing tool for IE5-6 (I use CSS - expression);
4. code that you will see below;

I set myself the task to make a beautiful decision for a situation when I need to shorten long names without losing the semantic load and a pleasant appearance.

This is a simple diagram of how I solved this problem. Below is the code.
body {
background:#fff;
}

h2 {
background:#fff;
font:18px verdana, serif;
margin:0;
position: relative;
overflow: hidden;
width: 200px;
white-space:nowrap;
}

h2 span {
position: absolute;
width: 100%;
height: 20px;
background: url(bg.png);
background-position: right;
background-repeat: repeat-y;
}

.png { filter:expression(PNG(this)) }

ABCDEFGHIJKLMNOPQRSTUUVWXYZ

body {
background:#fff;
}

h2 {
background:#fff;
font:18px verdana, serif;
margin:0;
position: relative;
overflow: hidden;
width: 200px;
white-space:nowrap;
}

h2 span {
position: absolute;
width: 100%;
height: 20px;
background: url(bg.png);
background-position: right;
background-repeat: repeat-y;
}

.png { filter:expression(PNG(this)) }

ABCDEFGHIJKLMNOPQRSTUUVWXYZ

Work demo
Cross post from my blog