3

次の構造が可能かどうか疑問に思っていました。

ここに画像の説明を入力

ここでは、固定幅と高さ (外側のボックス) の div があります。リストアイテムなので、幅と高さを統一したいので固定にしました。現在、説明領域に問題があります。複数の行に折り返されるテキストが必要です。収まらない場合は、楕円が表示されます。現在、説明 div に 2 行のテキストを表示するように、font-size と line-height を厳密に設定することを計画しています。これは正しいです？ブラウザによってはレンダリングがおかしくなり、デザインが非常に壊れやすいのではないかと心配しています。また、CSS のみのソリューションを使用して楕円を実装する方法についても少しわかりません。私は試してみましたtext-overflow: ellipsisが、うまく機能させることができませんでした。

正直なところ、自分が正しい道を進んでいるかどうかはまだわかりません。この構造には、既存の/より良い解決策が既にあるのではないかと考えています。他の誰かがこれをやっていますか？どんな助けでも大歓迎です。ありがとう。

JsFiddle リンクは次のとおりです。

http://jsfiddle.net/3kJWQ/4/

4

2 に答える 2

1

これはうまくいくようです：

.description {
  height: 60px;
  font-size: 14px;
  line-height: 21px;
  overflow: hidden;
  border: 1px solid #000;
  text-overflow: ellipsis;
  white-space: nowrap;

}

から: http://deepubalan.com/blog/2010/11/27/text-overflow-css3-property-explained-pure-css-solution-to-get-ellipsis/

text-overflow: 省略記号は次の場合にのみ機能します。

  1. 箱には目に見える以外のはみ出しがあります。
  2. ボックスには空白があります: nowrap.
于 2012-08-10T19:29:46.140 に答える
0

この質問から解決策を得ました：

幅と高さの固定 div 内に省略記号が追加されたクロス ブラウザーの複数行のテキスト オーバーフロー?

プラグイン jQuery dotdotdot を使用することにしました。

于 2012-08-11T14:11:34.613 に答える