12

テーブルのすべての行で統一されたルック アンド フィールを実現したいと考えています。以下の私の例を見ると、中央のメモが 4 行を超えており、あまりきれいではないことがわかります。

ここに画像の説明を入力

<td>すべてを3行に制限したいと思っていました。

表示する行が 3 行より多い場合は、コンテンツを で切り取り、コンテンツを折りたたみ可能な要素... [click for more]内に配置して、クリックするとコンテンツ全体が表示されるようにする必要があります。

後者は問題にならないはずですが、コンテンツを 3 行だけに制限するにはどうすればよいでしょうか? その上で決定を下すためにキャラクターを数えましょうか？より良い戦略はありますか？ちなみに私はDjangoを使用していますが、代わりにjavascript、jquery、またはCSSマジックを使用してこれを解決できます。

アップデート：

受け入れられた答えはとても良いです。ただし、解決するのは簡単ではないという警告があります。現在の td が 2 行しかないときに、既に 3 行を超える隣接がある場合td、無限の while ループが発生します。

ここに画像の説明を入力

while($(this).innerHeight() / $(this).css('line-height').slice(0,-2) >= 3){ .. }

$(this).innerHeight()隣接するセルが高さを高く保持しているため、減少できません。現在の td の css を取得し、隣接する td が干渉できない別のフィールドでコンテンツ全体に完全にコピーできれば、最適なソリューションが得られると思います。

更新 2:

Assad が述べたように、解決策は、コンテンツの周りに div ラッパーを配置しtd、クラスをそれ自体ではなくdiv内部に設定することです。それは完璧に動作します。tdtd

4

2 に答える 2

5

tdjQuery を使用していると仮定すると、以下を使用して特定の行数を超えるすべての要素を見つけることができます。

$('td').filter(function(){
    return $(this).innerHeight() / $(this).css('line-height').slice(0,-2) > 3; //more than 3 lines
});

次に、折りたたみ可能な要素をこれらのtd要素に適用できます。

これがデモンストレーションです（tdsの代わりに段落を使用）：http://jsfiddle.net/jM4ZY/1/

以下は、3 行に収まるようにコンテンツを切り取り、さらにボタンを追加する例です: http://jsfiddle.net/jM4ZY/2/

編集に関する限り、これはコンテンツの内部ラッパーを使用することで簡単に解決できます。おそらくdiv要素。次に、この要素の高さを測定できます。これは、隣接するセルの高さとは無関係です。

于 2012-12-03T10:49:04.730 に答える
1

別の jQuery ソリューションについては、こちらで説明しています

表示されたテキストの文字数を数えてテキストを変更する方法を説明します。文字数がわからない場合、またはテキストの長さに依存させたい場合は、この切り取りを使用して計算できます

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

テキスト幅の計算から取ったもの

于 2012-12-03T10:50:26.233 に答える