Question

我正在使用bootstap css表。我需要一个固定的长度表，如果需要，表中的内容（即..，td）应该包装成多行。

以下是我的代码片段无法正常工作。 td的内容未包含在固定长度的单元格内。

＆＃13;

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

＆＃13;

在图像中输出i。单元格的内容溢出。

Answer 1

添加此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

它不起作用，因为当你输入类似于＆＃39; sssssssssssssssssssssssssss＆＃39;它认为这是一个字。即使是响应式设计也不会破坏文字。但是如果你想打破一个单词，你应该尝试以下代码。

td{
    word-break: break-all;
}

Answer 3

在td

中使用自动换行css

  word-wrap: break-word;

固定长度和内容变形的引导表在td

3 个答案: