幅と高さが固定された領域にダイナミックテキストをエレガントに表示

Question

これは答えるのが不可能な質問かもしれませんが、私はとにかくそれをそこに出します。

基本的に、固定幅の領域で動的テキストを処理するためのエレガントな方法は何ですか。

下の例を見てください...白いボックスの境界を越えずにテキスト全体をどのように表示しますか？また、これは同じ要素がたくさんあるページの要素であることを考慮してください。そのため、ページの残りのレイアウトを押し出すので、高さを可変にすることはオプションではありません。

これまでのところ、私は考えました：

1. 文字数を制限し、...で切り捨てます。
2. テキストを切り取りますが、マウスオーバー時に全文を表示するタイトルタグを使用します
3. 2行目にドロップダウンし、その行を強制的に中断して、下の行のアイテムが並ぶようにします
4. マウスオーバーで表示されるスライドdiv上の画像内のテキストを配置します
5. テキストのスクロール（はい、私もそこに行きました...）
6. スクロールバー... 1行分？うーん...

私はそこにいる人々がこれについて持っているどんな考えにも魅了されるでしょう。

Answer 1

省略記号でテキストをカットすることも、私の最初のアイデアです。あるいは、テキストの上に透明度のグラデーションを配置することで、テキストを背景から「消える」ようにすることもできます。基本的には同じアイデアですが、デザインの観点からはもう少しエレガントです。全文を表示するツールチップを追加するのは良いボーナスかもしれません。

他のすべてのオプションは、設計を台無しにします。テキストを2行に分割する場合、テキストが収まるようにボックスを拡大すると、余分な水平スペースを予測する必要があります。フォントサイズを小さくすると読めなくなります。スクロールバーを使用する場合は、垂直方向の余分なスペースも予測する必要があり、見栄えが悪くなります。スクロールテキストを使用する場合...撃たれます。

追伸：そのテキストがかなり長い場合は、大文字ではないテキストの使用を検討してください。スペースを取らず、読みやすくなります。

Answer 2

私はあなたがデザインの安全な高さを持っていることを確認し、ラインが自然に切れることを許します。 title属性を使用しても、途中で切れることはありません。それは、ユーザーがテキストの上にマウスを置くことができることをユーザーに確実に知らせることを含み、それはテキストをかなり醜くするかもしれません。このような小さな領域のスクロールバーは絶対に避けてください。テキストの移動はうまくいかないようです。