Bootstrap tables débordant avec de longues unspaced texte

Je suis en utilisant Bootstrap et j'ai une table avec un peu de colonnes, dont le dernier a parfois un long morceau de texte sans espaces. J'ai remarqué que sous certaines tailles d'écran, la table de débordement de ses div parent et de créer laid qui se chevauchent avec son frère le tableau.

J'ai joué un peu avec elle et je pense que le problème a à voir avec le texte en cours de unspaced. J'ai créé un jsfiddle qui illustre ce que je veux dire.

Comme vous pouvez le voir, en haut à gauche de la table est bien sage et tout simplement se développe verticalement pour s'adapter à plus de texte. Cependant, le fond de la table de gauche conduit à un débordement sur la droite en raison de la longue unspaced texte et la colonne de droite, en bas à gauche de la table de vents", sous" sa sœur.

Quelqu'un aurait-il des conseils sur comment je peux résoudre ce problème de manière que le très long texte est écrêtée ou partiellement cassée sur une nouvelle ligne?

InformationsquelleAutor Richard Bender | 2012-08-30

121
```
.the-table {
    table-layout: fixed;
    word-wrap: break-word;
}
```
Obsolète (c'est à dire word-wrap)

Ajouter les styles suivants à votre <table>
```
.the-table {
    table-layout: fixed;
    over-flow: break-word;
}
```
Ensuite, vous pouvez ajuster votre mise en page via CSS comme vous le souhaitez.
- à titre d'information uniquement,lu quelque part sur word-wrap être depreceated, l'utilisation de sur-débit:break-word
- Je pense que vous avez tort. Vous pouvez consulter le projet ou le l'éditeur de projet. Que over-flow propriété n'existe pas. La propriété que nous parlons est nommé overflow-wrap ou word-wrap comme un autre. Pourriez-vous donner vos sources?
- j'ai lu ici impressivewebs.com/new-css3-text-wrap
- Cet article confirme ce que j'ai dit. Et il ne mentionne pas over-flow de la propriété. Je pense que vous avez mal lu, c'.
- sembler comme j'ai mal lu cette déclaration "Le trop plein d'enveloppe de propriété est le remplacement de l'désormais obsolètes word-wrap propriété"
- Mais cela vous oblige à utiliser des mises en page fixes. Pourquoi ne peut-il pas tout simplement arrêter l'expansion de la colonne de la table atteint le conteneur largeur et les autres colonnes ne peuvent pas être réduite de plus?
InformationsquelleAutor albertedevigo
22

Cela fonctionne sans forcer la disposition de table pour être fixé
Il suffit de l'ajouter à la td ou tout
```
.is-breakable {
  word-break: break-word;
}
```
- nice, aussi simple que cela.
InformationsquelleAutor Kate Kasinskaya
2

J'ai eu du mal avec ces solutions de travail dans Internet Explorer.

J'ai utilisé le style suivant pour obtenir enfin fonctionner.
```
<td style="word-break: break-all">
```
InformationsquelleAutor Justin Ipson
0

Vous pouvez utiliser en dessous de css. Ce sera le texte à la ligne et de les appliquer ... à la fin du texte.

par exemple This_is_a_large_text sera changé à This_is_a_lar...
```
td {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
```
Vous pouvez également ajouter un outil de pointe pour afficher le texte complet de la valeur.
```
<td data-toggle="tooltip" title="${text}">${text}</td>
```
InformationsquelleAutor Rahul Godara
0

Albers répondre 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'); 
```
Espère que cela aide!!

InformationsquelleAutor Saurabh Valsangkar

Vous devez vous connecter pour publier un commentaire.

Obsolète (c'est à dire word-wrap)