3

そのため、一部の賢い人はユーザー名に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>。スパンにスタイルを適用して、含まれるテキストを効果的にトリミングして、要素の外側 (上/下) にはみ出さないようにしたいと考えています。

現時点では、動作がかなり一貫していないことに注意してください。記号がユーザー名の下の行に「流れ込む」場合と、そうでない場合があります。また、ブラウザによって異なる場合があります。可能であれば、単純なクロスプラットフォーム ソリューションを希望します。

4

1 に答える 1

3

物件をご利用いただけoverflow:hidden;ます。スパンの表示プロパティを inline-block に設定するだけです:

デモ

CSS :

span{
    display:inline-block;
    overflow:hidden;
}
于 2014-09-09T15:39:18.180 に答える