javascript - 如何 chop 表格单元格中的文本？

Question

我想让我的表格单元格像 excel 中的单元格一样可编辑(意味着当我单击任何单元格时，应该出现一个突出显示的可编辑框，如果输入的文本超过单元格宽度，它的宽度应该增加)。完成后，表格单元格应显示为普通单元格，但超出的文本应被 chop 。它应该类似于excel sheet cell。

我试过了，

<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:focus{
  display: inline-block;
  width: "YOUR WIDTH";
}

现在您应该在 javascript 标签中添加问题:“如何在该单元格中进行编辑”