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

【问题标题】：how to truncate text in table-cell?如何截断表格单元格中的文本？
【发布时间】：2013-08-30 19:38:00
【问题描述】：

我想让我的表格单元格内容可编辑，就像在 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>

但溢出不起作用。

请提前帮助和感谢。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我想你期待这样试试这个

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

也试试

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

用于断词。

【讨论】：