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

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>

但溢出不起作用。

请提前帮助和感谢。

score 0 · Accepted Answer

我想你期待这样试试这个

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

并尝试

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

为破坏词。

score 0 · Accepted Answer

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

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

2 回答 2