td中固定長度和內容變形的引導表

Question

我正在使用bootstap css表。我需要一個固定的長度表，其中表格中的內容（即..，td）應該包裝成多行，如果需要的話。

下面是我的代碼不工作的片段。 td的內容不包含在固定長度的單元格內。

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

輸出I如在圖像。該單元格的內容溢出。在TD

word-wrap: break-word; 

Answer 1

使用自動換行CSS添加這個CSS

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

瞭解更多關於字斷的位置：

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

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

Answer 2

Answer 3

它不起作用，因爲當你鍵入'sssssssssssssssssssssssss'時它認爲它是一個單詞。即使響應式設計也不會破壞單詞。但是，如果你想打破一個詞，你應該嘗試下面的代碼。

td{ 
    word-break: break-all; 
}