html - 表格列的文本溢出在 IE8+ 中不起作用

Question

我用 bootstrap 做了一张 table 。我想添加文本限制。下面是html。该表及其限制在 chrome 和 firefox 中运行良好，但现在在 IE8+ 中运行。

<table class="table table-striped table-condensed table-bordered dashboard-table">
  <thead style="background-color: #F8DAC2; border-bottom: 3px solid #CA6A15; font-size: 12px">
    <tr>
      <th>Entity</th>
      <th>Board Meeting/Other committees of the board</th>
      <th>Date</th>
      <th>Exceptional Items</th>
      <th>Issues</th>
      <th>Remarks</th>
      <th>Respective Company's CEO/CFO's comment thereto</th>
      <th>Approve/Reject Remarks</th>

    </tr>
  </thead>
  <tbody class="text-justify"  style="font-size: 12px; font-weight: bold; color: #000;">
    <tr>
      <th scope="row"><a href="#"> ABNL</a></th>
      <td>Mark</td>
      <td>2 Jul 2015</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td><i class="fa fa-fw fa-check-circle-o" style="font-size: 20px; color: #007401"></i> Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</td>
    </tr>
    <tr>
       <th scope="row"><a href="#"> ABFNL</a></th>
      <td>Mark</td>
      <td>2 Jul 2015</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td><i class="fa fa-fw fa-times-circle-o" style="font-size: 20px; color: #CC0001"></i>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</td>
    </tr>
    <tr>
      <th scope="row"><a href="#"> ABFNL</a></th>
      <td>Mark</td>
      <td>2 Jul 2015</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td><i class="fa fa-fw fa-times-circle-o" style="font-size: 20px; color: #CC0001"></i>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</td>
    </tr>
  </tbody>
</table>

和我制作的相同的 css 类。原始 Bootstrap 我没有改变。

.dashboard-table tbody tr td{
    max-width: 200px ;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal;
}

Answer 1

IE 无法正常工作，我找到了答案或它的解决方法我不知道，但你需要在里面添加一个 div 标签，如下所示

 <tr>
          <td scope="row"><a href="#"> ABNL </a></td>
          <td>Mark</td>
          <td style="width:70px">2 Jul 2015</td>
          <td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td>
          <td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td>
          <td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td>
          <td><div>THIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td>

          <td><i class="fa fa-fw fa-times-circle-o" style="font-size: 20px; color: #CC0001"></i><div style="width: 85%; float: right">Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</div></td>
        </tr>

 <tr>