web-dev-qa-db-ja.com

divを表示する方法にはより多くのコンテンツがあります

私は基本的にはバックエンドの開発者ですが、異なるテーブルにデータを表示するページを作成する必要があります。

一部のデータ行には非常に大きなコンテンツが含まれている可能性がありますが、すべての行を同じ高さにすることにしました。その場合、行のサイズを変更してコンテンツの一部を非表示にし、クリック可能なようにしてdivのサイズを変更します。

表示するデータが多いように見せるために、ボタンを使用せずにそれを示したいのですが、単純なカーソルの変更では十分ではないようです。

これまでのところ、私はこれらのdivに「フェード」エフェクトを追加しようとしましたが、それはひどく見え、UXルーキーとして、より有能な人々からのアドバイスをお願いします。これは、視覚化に役立つスクリーンショットです。

Reduced divExpanded div

前もって感謝します。

編集:

JSコードやHTML要素を追加する必要がないソリューションが欲しいのですが、単にCSSを使用することは可能でしょうか?つまり、divをクリックしてコンテンツを取得できることを示す視覚的なトリックはありますか? (私はいくつかのウェブサイトがフェードトリックをしていることに気づきました、他に何かありますか?)

1
Jleu

コンテンツが切り捨てられている場合、省略記号(...)は、これをユーザーに示す良い方法です。

このようなもの:

ellipses example

1
Franchesca

私はこのようなことをします: enter image description here

情報と白い部分があるDivは、中央の矢印とシャドウで非表示になり、より多くのデータを表示します。通常、それほど重要ではないデータをそこに追加する必要があります。

1

上記の答えの組み合わせが良い解決策だと思います。ある種のアフォーダンスまたはそこにより多くのデータがあることを示す必要があります。そうでない場合、ユーザーは推測や試行錯誤を余儀なくされます

0
Gavin