長いユーザー名を表示する推奨方法は？

Question

したがって、問題はこれらの灰色のモジュールでユーザー名を表示しようとしていることです。スケール、切り捨て、最初/最後の数文字を表示するオプション、またはワードラップ（見栄えが悪い可能性があります）が表示されます。ユーザー名に文字制限はありません。

どちらをお勧めしますか？

Answer 1

私は以前にこの種の問題を抱えています。表示するシンボルの数を定義し、ツールヒントにカーソルを合わせたときに完全なユーザー名を提供するようにしてください。最後のいくつかの記号を表示することも良い考えです。

なぜそうなのかまずユーザーの認識です。あなたはそれが完全なユーザー名ではなく、「後にいくつかの記号がある」ことを示しています。最後のシンボルは、何を示すことができます。ただし、ドットなしで単にユーザー名をカットするよりはましです（そのような場合は失礼な間違いですらあります）。 "JohnSmith"は "JohnSmit4325"と同じではありません。折り返しは効果的で読みにくい（記号に制限はないと述べた）

モバイルではフォースタッチは新しいAppleガジェットでのみ使用できます。したがって、ご覧のとおり、このバリアントには対応していません。ホバーに関するツールチップは利用できません。次に、ユーザー名を1回タップするだけで、ツールチップの外観のようなヒントを提供する必要があります（他にアクションがない場合）。欠点は自明ではないことです。 「タップして完全なユーザー名を表示する」のようなものを書いて、この可能性についてユーザーに知らせる

Dropboxによる処理

最初と最後の記号が表示されます

ユーザー名をクリックしてアクション

Answer 2

必要に応じて個人的に改行します。ウェブ上のcssで簡単にできます。

Word-break: break-all;

代替案：

1. 切り捨て
2. ツールチップによる切り捨て

利点：

1. ユーザーはすべてのデバイスでフルネームを見ることができます。ホバーイベントがないモバイルを含み、ツールチップの表示が問題になる可能性があります。
2. 本当にクレイジーな長い名前がある場合でも、切り捨てを実装できますが、行の制限に達した後です。