Tableaux Bootstrap débordant de longs textes non espacés

Question

J'utilise Bootstrap et j'ai un tableau avec quelques colonnes, dont la dernière contient parfois un long texte sans espace. J'ai remarqué que, sous certaines tailles d'écran, le tableau débordait de son div parent et créait un chevauchement moche avec son tableau frère.

J'ai joué avec et je pense que le problème est lié au fait que le texte n'est pas espacé. J'ai créé un jsfiddle qui démontre ce que je veux dire.

Comme vous pouvez le constater, le tableau en haut à gauche se comporte bien et s'agrandit simplement verticalement pour accueillir plus de texte. Cependant, le tableau inférieur gauche entraîne un débordement sur la droite en raison du long texte non espacé et la colonne de droite du tableau inférieur gauche se retrouve "sous" son frère.

Quelqu'un a-t-il une idée de la façon dont je peux régler ce problème pour que le texte très long soit coupé ou partiellement divisé sur une nouvelle ligne ?

Answer 1

.the-table {
    table-layout: fixed;
    word-wrap: break-word;
}

Déclassé (i.e. word-wrap)

Ajoutez les styles suivants à votre <table>

.the-table {
    table-layout: fixed;
    over-flow: break-word;
}

Vous pouvez ensuite adapter votre mise en page via le CSS comme vous le souhaitez.

Answer 2

Cela fonctionne sans forcer la mise en page du tableau à être fixé Il suffit de l'ajouter à td ou à tout autre

.is-breakable {
  word-break: break-word;
}

Answer 3

J'avais des difficultés à faire fonctionner ces solutions dans Internet Explorer.

J'ai utilisé le style suivant pour que cela fonctionne enfin.

<td style="word-break: break-all">

Answer 4

Vous pouvez utiliser le css ci-dessous. Cela va envelopper le texte et appliquer ... à la fin du texte.

Par exemple, le texte This_is_a_large_text sera changé en This_is_a_lar...

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

Vous pouvez également ajouter une info-bulle pour afficher la valeur complète du texte.

<td data-toggle="tooltip" title="${text}">${text}</td>

Answer 5

La réponse d'Albers a fait l'affaire pour moi

.the-table {
 table-layout: fixed;
 word-wrap: break-word;
}

Dans le JS pour le charger dynamiquement, ajoutez

 $("#"  + tableName ).addClass('the-table'); 

J'espère que ça aidera !