Проблемы с переполнением и переносом текста в jQuery DataTable

Я согласился с ограничением (для некоторых людей преимуществом), когда в моих строках была только одна строка текста. CSS, содержащий длинные строки, становится таким:

.datatable td {
  overflow: hidden; /* this is what fixes the expansion */
  text-overflow: ellipsis; /* not supported in all browsers, but I accepted the tradeoff */
  white-space: nowrap;
}

[отредактируйте, чтобы добавить:] После использования моего собственного кода и первоначальной неудачи я осознал второе требование, которое могло бы помочь людям. Сама таблица должна иметь фиксированный макет, иначе ячейки будут продолжать пытаться расширяться, чтобы вместить содержимое, несмотря ни на что. Если стили DataTables или ваши собственные стили еще этого не сделали, вам необходимо установить это:

table.someTableClass {
  table-layout: fixed
}

Теперь, когда текст усечен многоточием, чтобы на самом деле «увидеть» текст, который потенциально скрыт, вы можете реализовать плагин всплывающей подсказки, кнопку подробностей или что-то в этом роде. Но быстрое и грязное решение - использовать JavaScript, чтобы установить заголовок каждой ячейки, идентичный ее содержимому. Я использовал jQuery, но вам необязательно:

  $('.datatable tbody td').each(function(index){
    $this = $(this);
    var titleVal = $this.text();
    if (typeof titleVal === "string" && titleVal !== '') {
      $this.attr('title', titleVal);
    }
  });

DataTables также предоставляет обратные вызовы на уровнях рендеринга строк и ячеек, поэтому вы можете предоставить логику для установки заголовков в этой точке вместо итератора jQuery.each. Но если у вас есть другие слушатели, которые изменяют текст ячеек, вам может быть лучше ударить их с помощью jQuery.each в конце.

Весь этот метод усечения ТАКЖЕ будет иметь ограничение, которое, как вы указали, вы не являетесь поклонником: по умолчанию столбцы будут иметь одинаковую ширину. Я определяю столбцы, которые будут постоянно широкими или постоянно узкими, и явно устанавливаю для них ширину в процентах (вы можете сделать это в своей разметке или с помощью sWidth). Любые столбцы без явной ширины получают равномерное распределение оставшегося места.

Это может показаться большим количеством компромиссов, но конечный результат того стоил.

Следующее объявление CSS работает для меня:

.td-limit {
    max-width: 70px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Вы можете попробовать установить word-wrap, но он пока работает не во всех браузерах.

Другой метод - добавить элемент вокруг данных вашей ячейки следующим образом:

<td><span>...</span></td>

Затем добавьте такой CSS:

.datatable td span{
    max-width: 400px;
    display: block;
    overflow: hidden;
}

Та же проблема, и я решил поместить таблицу между кодом

<div class = "table-responsive"> </ div>

Просто стиль css с использованием white-space:nowrap очень хорошо работает, чтобы избежать переноса текста в ячейки. И, конечно, вы можете использовать text-overflow:ellipsis и overflow:hidden для обрезки текста с эффектом многоточия.

<td style="white-space:nowrap">Cell Value</td>

Я очень поздно здесь, но после прочтения ответа @Greg Pettit и пары блогов или других вопросов SO, которые я, к сожалению, не могу вспомнить, я решил просто создать пару плагинов dataTables, чтобы справиться с этим.

Я помещаю их в битбакет в репозитории Mercurial. Я следил за плагином fnSetFilteringDelay и просто изменил комментарии и код внутри, поскольку я никогда не делал плагин для чего-либо раньше. Я сделал 2 и не стесняюсь использовать их, вносить в них свой вклад или вносить предложения.

• dataTables.TruncateCells - усекает каждую ячейку в столбце до заданного количества символов, заменяя последнюю 3 с многоточием и помещает полный предварительно обрезанный текст в присвоенный заголовок ячейки.

• dataTables.BreakCellText - пытается вставить символ разрыва каждый X, определенный пользователем, символы в каждую ячейку в колонка. Есть причуды в отношении ячеек, которые содержат как пробелы, так и дефисы, вы можете получить некоторые странные результаты (например, пара символов, идущих после последнего вставленного символа
  ). Может быть, кто-то сможет сделать это более надежным, или вы можете просто поиграть с breakPos для столбца, чтобы он выглядел хорошо с вашими данными.

Я столкнулся с той же проблемой переноса текста, решил ее, изменив css класса таблицы в DT_bootstrap.css. Я представил последние две строки css table-layout и word-break.

   table.table {
    clear: both;
    margin-bottom: 6px !important;
    max-width: none !important;
    table-layout: fixed;
    word-break: break-all;
   } 

Попробуйте добавить td {word-wrap: break-word;} в CSS и посмотрите, исправит ли он это.

Вы можете просто использовать рендеринг и обернуть свой собственный div или охватить его. TD трудно стилизовать, когда дело доходит до max-width, max-height и т. Д. Div и span - это просто.

См .: https://datatables.net/examples/advanced_init/column_render.html

Я думаю, что лучшее решение, чем работа с хаками CSS, которые не поддерживаются кросс-браузером.

Использование классов «responseive nowrap» в элементе таблицы должно помочь.