web-dev-qa-db-ja.com

短い入力ボックスに長いテキストを表示するにはどうすればよいですか?

次の3つのオプションのどれが最適か判断できません。ここで、どのオプションを選択するのか、そしてその理由を尋ねます。

編集:明確にするために、これらはテキスト入力コントロールであり、テーブルデータのセルではないセルです。

ここで試してみてください- http://codepen.io/run-time/pen/LEGqqJ

enter image description here

2
DaveAlger

これは、使いやすさよりも好みとデザインの問題です。 1と2はどちらも、テキストが非表示になっていることを示しています。オプション3は常にそうするわけではなく、フィールドの長さと入力に依存します。ですから、ユーザビリティの面では、私があなただったらそれをスクラッチします。

次に、赤い錠剤と青い錠剤を比較します。赤い丸印を使用しても、テキスト全体を表示(および選択)できます。あなたは青いものでそれをすることはできません(そうすることができますが、それはより多くの仕事になるでしょう)。

結局のところ、すべては次のようになります。

  • それはあなたのデザインに合いますか?
  • このコントロールはどのように使用されますか(全文選択vs最初の部分のみの選択)?

私の推奨:ウサギの穴を下らないでください...もっと深刻なことに、私は赤い錠剤を服用します。

3
Vince Caregnato

赤い錠剤を飲みなさい!これは、ハードエッジの種類のデータを切り取ることなく、より多くのコンテンツがあることを示しています。 UIの残りの部分が「メトロ」デザインに近い場合は、3番目のオプションを使用します。

1
DripDrop

私は同意しないようです-しないでください 3番目のオプションを使用してください。この設計に反する場合、テキストがさらにある可能性があることを示すものはありません(つまり、Wordが適切に右側で終わっている場合-あなたの場合、フィールドが5ピクセル狭かった場合)。

レッドピルはより革新的であり(デザインやターゲットグループやブラウザの人口に合うかもしれないし、そうでないかもしれません)、ブルーピルはより一般的です(安全な選択です)。あなたのデザインに一番合うものを選んでください。

1
virtualnobi