css - 文本溢出：省略号不适用于可编辑的 div

Question

我有一张有很多 td 的桌子，其中 css 是

text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden;
max-width:84px;
padding-left:10px;

一切正常，但对于那些文本溢出，我在一些 td 中也有可编辑的 div ：省略号；不工作。

它们是隐藏的，但没有......对于内容

编辑

这是我用来生成表格的 HTML

<table>
   <tr>
     <th>First Name</th>
     <th>Last Name</th>
     <th>Job Title</th>
     <th>Company</th>
     <th>Email</th>
   </tr>
   <tr>
     <td>ABC</td>
     <td>XYZ</td>
     <td>Software Engineer</td>
     <td><div contenteditable="true">ABC Corporation</div></td>
     <td><div contenteditable="true">abc@gmail.com</div></td>
   </tr>
</table>

Answer 1

元素嵌套的方式意味着您需要将样式td div应用于td. 此 CSS 适用于您提供的 HTML：

td div{
text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden;
max-width:84px;
padding-left:10px;
}

这是一个jsFiddle

Answer 2

添加display: block到样式。

text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden;
max-width:84px;
padding-left:10px;
display:block;