Question

我有一张表有很多td，其中css是

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

一切正常，但我也有一些可编辑的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;
}

And here's a jsFiddle

Answer 2

将display: block添加到样式。

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

text-overflow：省略号不适用于可编辑的div

2 个答案: