html - 在这种情况下文本溢出如何

Question

我想在这个表中文本覆盖流数据，我尝试了很多方法让它工作，但有些方法它在 Firefox 中也能工作，我想让它在 IE 中工作。

而且方法不是使用 Bootstrap ，而是完成它。

在这种情况下，正确的 CSS 是什么。

这是我的 CSS 代码示例:

.table {
        width: 450px;
        max-width: 450px;
      }
      .col-1 {
        width: 30%;
        max-width: 30%;
        overflow: hidden;
        text-overflow: clip !important;
        white-space: nowrap;
        word-wrap: break-word;
      }
      .col-2 {
        width: 40%;
        max-width: 40%;
        overflow: hidden;
        text-overflow: clip !important;
        white-space: nowrap;
        word-wrap: break-word;
      }
      .col-3 {
        width: 30%;
        max-width: 30%;
        overflow: hidden;
        text-overflow: clip !important;
        white-space: nowrap;
        word-wrap: break-word;
      }

<table class="table" border="0" cellspacing="5" cellpadding="5">
      <tbody>
        <tr>
          <td class="col-1">longgggggggggggggg gggggggggggg</td>
          <td class="col-2">longgggggggggggggg ggggggggggggg</td>
          <td class="col-3">longgggggggggggggg ggggggggggggg</td>
        </tr>
        <tr>
          <td class="col-1">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td>
          <td class="col-2">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td>
          <td class="col-3">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td>
        </tr> 
        <tr>
          <td class="col-1">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td>
          <td class="col-2">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td>
          <td class="col-3">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td>
        </tr>
      </tbody>
    </table>

Answer 1

默认情况下，表格单元格的宽度必须与其内容一样宽。

但是您可以使用 table-layout: fixed 切换到忽略内容的更快、更可靠的布局模式。

.table {
  width: 450px;
  table-layout: fixed;
}
td {
  overflow: hidden;
  white-space: nowrap;
}
.col-1, .col-3 {
  width: 30%;
}
.col-2 {
  width: 40%;
}

<table class="table" border="0" cellspacing="5" cellpadding="5">
  <tbody>
    <tr>
      <td class="col-1">longgggggggggggggg gggggggggggg</td>
      <td class="col-2">longgggggggggggggg ggggggggggggg</td>
      <td class="col-3">longgggggggggggggg ggggggggggggg</td>
    </tr>
    <tr>
      <td class="col-1">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td>
      <td class="col-2">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td>
      <td class="col-3">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td>
    </tr>
    <tr>
      <td class="col-1">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td>
      <td class="col-2">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td>
      <td class="col-3">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td>
    </tr>
  </tbody>
</table>