Table bootstrap avec longueur fixe et contenu déformé à l'intérieur td

Question

J'utilise bootstap css pour une table. J'ai besoin d'une table de longueur fixe où le contenu à l'intérieur de la table (c'est-à-dire .., td) devrait s'enrouler sur plusieurs lignes si nécessaire.

Ci-dessous l'extrait de code qui ne fonctionne pas. le contenu de td n'est pas enveloppé dans une cellule de longueur fixe.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    
 
    <div class="container"> 
 
     <h2>Basic Table</h2> 
 
     <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p> 
 
     <div class="table-responsive"> 
 
     <table class="table fixed"> 
 
     <thead> 
 
      <tr> 
 
      <th class="col-xs-3">Firstname</th> 
 
      <th class="col-xs-3">Lastname</th> 
 
      <th class="col-xs-3">Email</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td class="col-xs-3">Johddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddn</td> 
 
      <td class="col-xs-3">Doe</td> 
 
      <td class="col-xs-3">john@example.com</td> 
 
      </tr> 
 
      <tr> 
 
      <td class="col-xs-3">Mary</td> 
 
      <td class="col-xs-3">Moe</td> 
 
      <td class="col-xs-3">mary@example.com</td> 
 
      </tr> 
 
      <tr> 
 
      <td class="col-xs-3">July</td> 
 
      <td class="col-xs-3">Dooley</td> 
 
      <td >july@example.com</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
     </div> 
 
    </div>

sortie I comme dans l'image. le contenu de la cellule déborde.

Answer 1

Utilisez retour à la ligne dans le td css

word-wrap: break-word; 

Answer 2

Ajouter ce CSS

table { 
     -ms-word-break: break-all; 
     word-break: break-all;  
} 

En savoir plus sur mot-break ici:

https://css-tricks.com/almanac/properties/w/word-break/

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

Answer 3

Cela ne fonctionne pas parce que quand vous tapez 'sssssssssssssssssssssssss' il pense que c'est un mot. Même les conceptions sensibles ne cassent pas les mots. Mais si vous voulez aussi casser un mot, vous devriez essayer ce code comme suit.

td{ 
    word-break: break-all; 
}