web-dev-qa-db-fra.com

Tables Bootstrap débordant de long texte non espacé

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, la table déborderait de son div parent et créerait un chevauchement moche avec son tableau frère. 

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

Comme vous pouvez le constater, la table la plus en haut à gauche est bien conçue et s’agrandit simplement verticalement pour accueillir davantage de texte. Cependant, le tableau en bas à gauche conduit à un débordement à droite en raison du long texte non espacé et la colonne de droite du tableau en bas à gauche se termine "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?

csstwitter-bootstrapcss-tables
62
Richard Bender

Ajoutez les styles suivants à votre <table>

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

Ensuite, vous pouvez ajuster votre mise en page via CSS à votre guise.

117
albertedevigo

Ceci fonctionne sans forcer la mise en page de la table .__ 

.is-breakable {
  Word-break: break-Word;
}
22
Kate Kasinskaya

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

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

<td style="Word-break: break-all">
2
Justin Ipson

Vous pouvez utiliser ci-dessous css. Cela va envelopper le texte et appliquer ... à 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 complète du texte.

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

Albers répond a fait le tour 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
Saurabh Valsangkar