I know this question is old, but I just had the same Problem and found a much easier solution with just a span.
http://jsfiddle.net/7hy3w2jj/
<div>some text</div>
<div>
<span class="text-overflow-center">some text that will overflow</span>
</div>
Then you just need this definition
.text-overflow-center {
margin-left: -100%;
margin-right: -100%;
text-align: center;
}
If you can work with pseudo elements, it can be done with no html at all.
Just add these definition to your text container. http://jsfiddle.net/7287L9a8/
div:before {
content: "";
margin-left: -100%;
}
div:after {
content: "";
margin-right: -100%;
}
The only downside to the pseudo variant is that it only works with one line of text.