Bootstrap tables débordant de long texte non espacé

J'utilise Bootstrap et j'ai une table avec quelques colonnes, dont la dernière a parfois un long morceau de texte sans espaces. J'ai remarqué que sous certaines tailles d'écran, la table déborderait de sa div parente et créerait un chevauchement laid avec sa table frère.

J'ai joué avec et je pense que le problème a à voir avec le texte non espacé. J'ai créé un jsfiddle qui démontre ce que je veux dire.

Comme vous pouvez le voir, la table la plus à gauche est bien se comporte et se développe simplement verticalement pour accueillir plus de texte. Cependant, la table en bas à gauche conduit à un débordement sur la droite en raison du long texte non espacé et la colonne de droite de la table en bas à gauche serpente "sous" son frère.

Quelqu'un at-il des conseils sur la façon dont je peux résoudre ce problème afin que le texte très long soit coupé ou partiellement divisé sur une nouvelle ligne?

60
demandé sur Brian Tompsett - 汤莱恩 2012-08-30 15:05:36

5 réponses

Ajouter les styles suivants à votre <table>

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

Ensuite, vous pouvez ajuster votre mise en page via-CSS comme vous le souhaitez.

113
répondu albertedevigo 2016-11-21 15:38:03

Cela fonctionne sans forcer la mise en page de la table à corriger Il suffit de l'ajouter à td ou à tout

.is-breakable {
  word-break: break-word;
}
19
répondu Kate Kasinskaya 2016-05-25 08:37:58

J'avais des problèmes avec ces solutions fonctionnant dans Internet Explorer.

J'ai utilisé le style suivant pour obtenir enfin fonctionner.

<td style="word-break: break-all">
1
répondu Justin Ipson 2017-10-01 10:38:33

Vous pouvez utiliser ci-dessous css. Cela enveloppera le texte et s'appliquera ... dans la fin du texte.

Par exemple, 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 du texte complet.

<td data-toggle="tooltip" title="${text}">${text}</td>
0
répondu Rahul Godara 2017-06-08 08:29:51

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 ajouter

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

J'espère que ça aide!!

0
répondu Saurabh Valsangkar 2018-09-14 11:56:47