How can I confine text to the bounds of a SPAN element, including accents/combining characters?

So, some smartass is putting Zalgo Text in their username. I don't actually want to restrict users from having accents in their names, but text above/below their name can be difficult to read. (note that this example actually renders pretty well here on the finished SO page, but in the editor it's another matter!)

Tͤ̔ͧ̇̍ͣh̥̼ͧͤͭͫ̇͋̿͟i̧̹̥̳̲͎ͨ̿̐̚s̰͕̫̥ ̳͚̳̟̫̭̯͊ͭ̅̏̊i̢͖̭̾ͦ̓͆s̗̹ ̸̬̙̯̫̓̊ͪͭͩ̿ś̰̱̥̖̈̌̆̿ī̥͔̽m̛̹̙̈́̾̊p̙̪̘̄̽̄͗ͦl͕̭̱͎̄͆ě̂͒͑̄ ̜͎̯͚̠̖̍͊̕s̱̞̺ͣ̓̓̒͜a͍ͫ͑͜m͍̙̠̻̲͍̜͒́̇̓͛̍̑p̪̩̪͙͍̥̆͗͝l͍̔̾ͨě̷̞̯̫̮̝̔̓͂̾̐̊ ͂̊̍̑ͨ͒̈́t͉̯̜̣̹̋̊̉́e̶̟̘̬ͫ̊̉̚ͅx̳̻͙̫̮̲͚ț̟͕́̌̚
This is a second example

Right now, the user name on my site is displayed in a simple <span>. I'd like to apply a style to the span that effectively crops the text it contains to prevent it from spilling outside (above/below) the element.

Note that right now, behavior is pretty inconsistent -- sometimes the symbols "bleed into" the line below the user name, and sometimes they don't. It might also vary from browser to browser. I'd prefer a simple, cross-platform solution, if possible.

You can use the overflow:hidden; property. You just need to set the display property of the span to inline-block :

DEMO

CSS :

span{
    display:inline-block;
    overflow:hidden;
}