入力フィールドをその幅より長いテキストでマークする方法は？
多くの入力フィールドを持つフォームを考えると、いくつかは入力フィールドの幅を超える長いテキストを持っています。それらの入力フィールドに、表示されているよりも多くのテキストがあることを示す何らかの方法でマークを付けたいと思います。
これらのフィールドの右側に矢印アイコンを表示することを検討しましたが、ユーザーが入力を最後から表示する可能性があるため除外しました。その場合、左側にテキストが表示されます。私はそれが最も明白であり、一般的にはより多くのテキストを強く示唆するような方法でマークを付けたいと思います。
通常の入力フィールドに収まらないテキストには、textareaを使用します。
入力フィールドから変更できない場合は、クリック/フォーカス/ホバーの上に置くことができる省略記号（...）を使用して入力フィールドのサイズを拡大し、すべてのテキストを表示するのに十分な幅になるか、すべてのテキストを表示するテキストエリア。
入力フィールドの形状またはサイズを変更できない場合は、省略記号（...）の使用を検討してください。省略記号（...）をクリックして、フォーカスを合わせるか、ホバーして、入力フィールドの残りのコンテンツをポップアップまたは同様のUIパターンで表示できます。 。
入力フィールドに入力されるテキストがフィールドに収まらないほど長くなる必要がないように、フォームのデザインを変更します。
既にコンテンツが含まれている入力フィールドが表示されるのはなぜですか？編集可能なコンテンツですか？補足の場合は、テキストを入力フィールドからフィールドの横または上にあるラベルに移動することを検討してください。
エリプシスを使用するというラフルの提案に同意します。入力にフォーカスがない場合、最後のいくつかの表示文字を薄い灰色の「...」で置き換えることができます。入力にフォーカスがある場合、省略記号なしでフィールドの全コンテンツにアクセスできるはずです。
Adobe InDesignでは、追加のコンテンツが含まれるテキストボックスには、テキスト領域の右下隅にあるボックスに小さな+が表示されます。 （これが私が説明しようとしていることを説明するために見つけた例です： http://creativecurio.com/wp-content/uploads/2008/07/quark-indesign-text-link.gif ）このフォームを作成するために何を使用しているのかわからないので、どれだけカスタマイズできるかによっては、これができない場合があります。
オーバーフローテキストの前に表示されていた最後の文字が透明度グラデーションで「消える」フォームを見ました。それはとてもよく見え、そこで何が起こっているのかは明らかです。どこか思い出せない….
あなたがどうやってそれをしたのか私にはわかりません。
そして、はい、テキストの先頭でオーバーフローするのは複雑（そして何とか反自然）です。例のように十分な行があるtextareaにコンテンツを表示して、テキストが水平にスクロールしないようにして、コンテンツを回避する必要があります。これは、ユーザーがそこにあるテキストの量を確認できないためにも悪いです。
また、rahulが示唆したように、ホバー時にすべてのテキストを表示します。
入力フィールドの形式は、それ自体が、フィールドで予期されるテキストの量または予想されるテキストの量を示すのに十分なインジケーターである必要があります。
- 短い入力が必要な場合=> 1行のテキストフィールドを使用してください。
- 大量の入力が必要な場合=>複数行のテキストフィールドを使用
テキストの量に応じて、複数行のテキストフィールドに2、3、またはそれ以上の行を使用します。また、そのフィールドの最後の行を切り捨てることもできます。
ボックスの外側を考えてみましょう。省略記号outsideボックスを表示することを検討してください。
オーバーフローなし
右にオーバーフロー
左にオーバーフロー
省略記号の2番目の提案です。テキストが境界線の左側にスクロールされる場合は左側に、テキストが境界線の右側にある場合は右側に表示されます。
しかし、私は省略記号を非常に小さく（たとえば、テキストフォントの50％）し、別の色、おそらくライトグレー（白に黒のテキストを想定）を作成します。要点を説明するには、微妙な視覚的手掛かりが必要です。
Textareaを使用するか、複数行のテキストがある場合は、テキストボックスを1つに拡張します。