переполнение текста: проблемы с многоточием в Internet Explorer - PullRequest
Новая
       7

переполнение текста: проблемы с многоточием в Internet Explorer

5 голосов
/ 12 декабря 2011

Я пытаюсь сократить длину столбцов в определенной таблице.

Я использую некоторый 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Я также попытался указать свойство "width" безрезультатно.

Ответы [ 3 ]

6 голосов
/ 12 декабря 2011

Вам также нужно white-space:nowrap; на td. Кроме того, table-layout:fixed; должно быть установлено на самой таблице, иначе IE по-прежнему не будет обрезать текст.

2 голосов
/ 10 апреля 2013

Для всех, кто сталкивается с этой проблемой, я обнаружил, что мне нужно определить высоту, чтобы сделать IE счастливым, height:20px;

0 голосов
/ 18 июня 2013

IE7 не будет применять переполнение текста к элементам таблицы - вам придется обернуть содержимое в другой лишний содержащий элемент и применить к нему 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);
}
...