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?
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.
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;
}
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">
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>
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!!