如何将文本限制在SPAN元素的边界，包括重音符号/组合字符？

Question

因此，一些smartass将Zalgo Text放在他们的用户名中。我实际上并不想限制用户在名称中使用重音，但是他们名字上方/下方的文字可能难以阅读。 （请注意，这个示例实际上在完成的SO页面上渲染得非常好，但在编辑器中这是另一回事！）

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

现在，我网站上的用户名显示在一个简单的<span>中。我想在跨度上应用一种样式，有效地裁剪它包含的文本，以防止它溢出元素的外部（上方/下方）。

请注意，现在，行为非常不一致 - 有时符号会“渗入”用户名下方的行，有时则不会。它可能因浏览器而异。如果可能的话，我更喜欢简单的跨平台解决方案。

Answer 1

您可以使用overflow:hidden;属性。您只需将span的display属性设置为inline-block：

<强> DEMO

CSS：

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