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

Question

我想在这个 table 中用文本覆盖流数据，我尝试了很多方法让它工作，但有些方法它在 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 个单元格必须与其内容一样宽。

但您可以使用 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>

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

How do text-overflow in this case

html

css

css-tables