Bootstrap Tabelle mit fester Länge und Inhalt Warping innerhalb td

Question

Ich benutze Bootstap CSS für eine Tabelle. Ich benötige eine feste Länge Tabelle, wo der Inhalt innerhalb der Tabelle (dh .., td) sollte in mehrzeilige Zeile bei Bedarf wickeln.

Unten ist der Ausschnitt meines Codes, der nicht funktioniert. Inhalt von TD ist nicht in einer Zelle fester Länge verpackt.

<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>

Ausgang I wie in Bild. Der Inhalt der Zelle ist überfüllt.

Answer 1

Verwenden Zeilenumbruch css im td

word-wrap: break-word; 

Answer 2

diese CSS hinzufügen

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

mehr über Wort-break hier lesen:

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

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

Answer 3

Es funktioniert nicht, denn wenn Sie wie 'sssssssssssssssssssssssss' eingeben, denkt es, es ist ein Wort. Selbst ansprechende Designs brechen keine Wörter. Aber wenn Sie auch ein Wort brechen wollen, sollten Sie diesen Code wie folgt versuchen.

td{ 
    word-break: break-all; 
}