5

特定のテーブルの列の長さを短くしようとしています。

jQueryを使用して、テキストオーバーフローの省略記号といくつかのcssプロパティを追加しています。
さらに jQuery を使用してツールチップを追加します。これが私のコードです：

$('#table_id tr td:not(:last)').css({
"text-overflow": "ellipsis",
"max-width": "110px",
"overflow": "hidden",
"display" : "block"
}).each(function (index, element) { $(element).attr("title", $(element).text()); });

Firefox と Chrome ではすべて正常に動作しますが、(驚き! 驚き!) IE7-9 ではテキストが完全な長さでレンダリングされます。

私は何が間違っているのですか？ありがとう！

PS
また、「幅」プロパティを無駄に指定しようとしました。

4

3 に答える 3

6

あなたも必要white-space:nowrap;ですtd。さらに、table-layout:fixed;テーブル自体に設定する必要があります。そうしないと、IEはテキストを切り取りません。

于 2011-12-12T14:08:05.570 に答える
2

この問題に出くわした他の人にとっては、IE を満足させるには高さを定義する必要があることがわかりました。height:20px;

于 2013-04-10T16:01:01.350 に答える
0

IE7 は table 要素に text-overflow を適用しません — そうでなければ余分な包含要素でコンテンツをラップし、あなたのtext-overflow(および関連するスタイル) をそれに適用する必要があります:

$('#table_id tr td:not(:last)').each(function (index, element) {
  var $el  = $(element);
  var text = $el.text();
  var html = $el.html();

  $el.attr("title", text).empty();

  $('<div>').css({
    "text-overflow": "ellipsis",
    "max-width"    : "110px",
    "overflow"     : "hidden",
    "display"      : "block"
  }).html(html).appendTo($el);
}
于 2013-06-18T14:33:49.467 に答える