jQuery Datatables de débordement et d'habillage de texte des questions

j'ai réglé pour la limitation (pour certaines personnes un avantage) d'avoir mes lignes seulement une ligne de haut texte. Le CSS contenant de longues chaînes devient alors:

.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;
}

[Modifier pour ajouter:] après avoir utilisé mon propre code et avoir d'abord échoué, j'ai reconnu une deuxième exigence qui pourrait aider les gens. La table elle-même doit avoir une mise en page fixe ou les cellules vont juste continuer à essayer de s'étendre pour accommoder le contenu peu importe ce que. Si les styles DataTables ou vos propres styles ne le font pas déjà, vous besoin:

table.someTableClass {
  table-layout: fixed
}

maintenant que le texte est tronqué avec des ellipses, pour réellement "voir" le texte qui est potentiellement caché vous pouvez implémenter un plugin tooltip ou un bouton de détails ou quelque chose. Mais une solution rapide et sale est d'utiliser JavaScript pour définir le titre de chaque cellule pour être identique à son contenu. J'ai utilisé jQuery, mais vous n'avez pas à:

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

DataTables fournit également des callbacks aux niveaux de rendu des lignes et des cellules, de sorte que vous pouvez fournir la logique pour titres à ce point au lieu d'un jQuery.each itérateur. Mais si vous avez d'autres écouteurs qui modifient le texte de la cellule, vous pourriez être juste mieux de les frapper avec le jQuery.each à la fin.

cette méthode de troncature complète aura aussi une limitation dont vous n'êtes pas fan: par défaut les colonnes auront la même largeur. J'identifie les colonnes qui vont être uniformément large ou constamment étroit, et explicitement fixer une largeur basée sur le pourcentage sur eux (vous pourriez le faire dans votre balisage ou avec sWidth). N'importe quelles colonnes sans une largeur explicite obtiennent la distribution égale de l'espace restant.

cela peut sembler beaucoup de compromis, mais le résultat final en valait la peine pour moi.

Le code CSS suivant déclaration qui fonctionne pour moi:

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

vous pouvez essayer de définir le word-wrap toutefois, il ne fonctionne pas dans tous les navigateurs encore.

une Autre méthode serait d'ajouter un élément à votre cellule de données comme ceci:

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

Puis ajouter un peu de css comme ceci:

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

je suis en retard ici, mais après avoir lu la réponse de @Greg Pettit et quelques blogs ou autres questions que je ne me souviens malheureusement pas j'ai décidé de faire quelques plugins dataTables pour gérer cela.

fnSetFilteringDelay plugin et juste changé les commentaires et le code à l'intérieur, comme je n'ai jamais fait un plugin pour quoi que ce soit avant. J'ai fait 2, et se sentent libres de les utiliser, contribuer à eux, ou fournir suggestion.

• tables de données.TruncateCells - tronque chaque cellule dans une colonne jusqu'à un nombre défini de caractères, en remplaçant les 3 derniers par des ellipses, et place le texte complet pré-tronqué dans le titre de la cellule attribué.

• tables de données.BreakCellText - tente d'insérer un caractère de rupture à chaque X, défini par l'utilisateur, caractères dans chaque cellule de la colonne. Il ya des bizarreries concernant les cellules qui contiennent à la fois les espaces et les traits d'Union, vous pouvez obtenir des résultats bizarres (comme un couple de caractères traînant après le dernier inséré
  
  caractère). Peut-être que quelqu'un peut rendre cela plus robuste, ou vous pouvez juste jouer avec les breakPos pour la colonne pour le faire paraître correct avec vos données.

j'ai fait face au même problème d'emballage de texte, résolu en changeant le css de la classe table dans DT_bootstrap.CSS. J'ai introduit les deux dernières lignes css table-layout et word-break.

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

le même problème et j'ai résolu mettre la table entre le code

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

Essayez d'ajouter td {word-wrap: break-word;} à la css et voir si elle le corrige.

simplement le style css en utilisant white-space:nowrap fonctionne très bien pour éviter l'habillage du texte dans les cellules. Et bien sûr, vous pouvez utiliser le text-overflow:ellipsis et overflow:hidden pour tronquer le texte avec effet d'ellipse.

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

vous pouvez simplement utiliser render et envelopper votre propre div ou span autour de lui. Les TD sont difficiles à coiffer quand il s'agit de max-width, max-height, etc. Div and span est facile..

Voir: https://datatables.net/examples/advanced_init/column_render.html

je pense qu'une solution plus agréable de travailler avec des hacks CSS qui ne sont pas pris en charge multi-navigateur.