Question

如何检查第四个td已溢出第二个td

的内容

我需要了解td是否有其他td的溢出文本，以及td的文本是否溢出。

如何检查td文本溢出的td。

这是fiddle

提前致谢。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

注意：

我在div内添加了td因为text-overflow对td元素不起作用。

Answer 2

更新了答案

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

gestureOverlayView

更新的小提琴is here。

Answer 3

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

让我知道它是否有效!!

我怎样才能检查td是否有其他td溢出的文本

3 个答案: