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

Question

我想在此表中使用text-over flow数据，我尝试了很多方法使其工作，但某些方式它也适用于Firefox，我想让它在IE中工作。

方式不是使用bootstrap，要完成它。

在这种情况下使用的CSS是正确的。

这是我的CSS代码示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>