如何截断表格单元格中的文本？

Question

我想让我的表格单元格像excel中的单元格一样（意味着当我点击任何单元格时，应该出现一个突出显示的可编辑框，如果输入的文本超出单元格宽度，其宽度应该增大）。当我完成时，表格单元格应显示为正常单元格，但超出文本应截断。它应该类似于excel表格单元格。

我试过了，

<td contenteditable="true" class="content" style="overflow:hidden"></td>

并在焦点事件上我做了它的z-index：15。同样在模糊事件上，我删除了z-index。但输入的文本不会被修剪，单元格宽度会更新为文本宽度。

我也试过了，

<td><div contenteditable="true" style="width:100%; height:100% overflow:hidden"></div>  
</td>

但溢出不起作用。

请提前帮助和谢谢。

Answer 1

我认为你期待这样尝试这个

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

并尝试

   word-wrap: break-word;
   overflow-wrap: break-word;

打破单词。

Check this fiddle

Answer 2

.content:focus{
  display: inline-block;
  width: "YOUR WIDTH";
}

现在你应该在javascript标签中添加关于“如何在该单元格中进行编辑”的问题