如何在這種情況下的文本溢出

Question

我想在這個表中的文本溢出數據，我嘗試了很多方式使它工作，但它也可以在Firefox中工作，我想使它工作在IE瀏覽器。

而方式是不使用引導程序，使其完成。

什麼是正確的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>