如何检查一个TD是否有其他一些TD的溢出文本

Question

如何检查的第二td

我需要获得第四td溢出内容td是否有其他td“ s溢出的文本，而且这td的文本溢出。

我该如何检查td，其中td的文本溢出了它。

这里是提前fiddle

感谢。

Answer 1

请从CSS

删除white-space:nowrap;替换为下面的CSS的TD。

td{ 
border: 2px solid black; 
-webkit-user-select:none; 
width:25%; 
height:20px; 
overflow:visible; 
text-overflow:ellipsis; 
padding:0px; 
} 

Example

让我知道，如果它的作品！

Answer 2

我看到你的小提琴，我猜你没有显示溢出为ellipsis。显示溢出文本并检查td容器的其他td的内容不是一个好主意。试试这个片段，如果它解决您的问题写：

table{ 
 
    border-collapse: collapse; 
 
    table-layout:fixed; 
 
    width:500px; 
 
} 
 
td{ 
 
    border: 2px solid black; 
 
    width:25%; 
 
    height:20px; 
 
    padding:0px; 
 
} 
 
td > div{   /* ADDED */ 
 
    width: 100%; 
 
    overflow: hidden; 
 
    text-overflow:ellipsis; 
 
    white-space:nowrap; 
 
}

<div> 
 
    <table> 
 
     <tr> 
 
     <td></td> 
 
     <td> 
 
      <div>Second cell text overflow to Third cell</div> 
 
     </td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
    </table> 
 
</div>

注意：

我加div内td原因text-overflow不会为td元素工作。

Answer 3

更新回答

The first version工作了相邻的单元格。为了收集/查找所有可能受到影响的细胞，我提出了一种不同的方法。 请注意，此功能仅限于具有相同大小的单元格。如果你想处理不同的单元格大小，你需要修改受影响的单元格的计算。

$(function(){ 
    var self, index, affectedCells; 
    // loop over all cells... 
    $('td').each(function() { 
     // test if the cell contains a text too long.... 
     if(this.scrollWidth > $(this).outerWidth()) { 
      // in case the cell has too long text... 
      self = $(this); 
      self.addClass('has_overflow'); 

      // get current index 
      index = self.closest('tr').find('td').index(self); 

      // look how many cells are effected 
      affectedCells = Math.ceil(this.scrollWidth/self.outerWidth()) - 1; 

      // highlight all effected cells... 
      for(var i= 1; i <= affectedCells; i++) { 
       self.closest('tr') 
        .find('td:eq('+(index+ i)+')') 
        .addClass('is_overflown'); 
      } 

     } 
    }); 
}); 

更新的小提琴is here。