액센트/결합 문자를 포함하여 SPAN 요소의 경계에 텍스트를 어떻게 제한 할 수 있습니까?

Question

그래서 일부 스마트 캐는 사용자 이름에 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; 속성을 사용할 수 있습니다. 당신은 인라인 블록에 스팬의 표시 속성을 설정해야합니다

DEMO

CSS :

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