省略号在表格单元格中不起作用

Question

我有一张表格，其中省略号应该应用于第一个单元格（第一个单元格应该填充剩余空间），但是表格会在父div之外。我怎样才能使它工作？

.wrapper { 
 
    width:200px; 
 
    background: wheat; 
 
} 
 

 
.el-cell { 
 
    width:99%; 
 
    display: block; 
 
} 
 
.table { 
 
    width: 100%; 
 
} 
 

 
.no-wrap { 
 
    white-space: nowrap; 
 
} 
 

 
.el { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="wrapper"> 
 
    <table class="table"> 
 
    <tr> 
 
     <td class="el-cell"> 
 
     <div class="el"> 
 
      <span>first cell should ellipsis aaaaaaa bbbb ccccccc</span> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <span class="no-wrap">2nd cell</span> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 1

添加position: relative到.el-cell和position: absolute到span具有属性top: 0和left: 0

.wrapper { 
 
    width:200px; 
 
    background: wheat; 
 
} 
 

 
.el-cell { 
 
    width:99%; 
 
    position: relative; 
 
} 
 

 
.el span{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="wrapper"> 
 
    <table class="table"> 
 
    <tr> 
 
     <td class="el-cell"> 
 
     <div class="el"> 
 
      <span>first cell should ellipsis aaaaaaa bbbb ccccccc</span> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <span class="no-wrap">2nd cell</span> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

只需添加table-layout: fixed。