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