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

Question

i want to make my table cell contenteditable like the one in excel (means when i click on any cell, a highlighted editable box should come and its width should grow if entered text exceeds the cell-width). when i am done, table cell should be displayed as a normal cell but exceeding text should truncate. It should be similar to excel sheet cell.

i have tried,

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

and on focus event i made its z-index:15. Also on blur event, i removed the z-index. But the text entered is not trimmed and cell width gets updated as that of text.

i also have tried,

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

but overflow not working.

please help and thanks in advance.

Answer 1

i think you expecting like this try this

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

and also try

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

for breaking word.

Check this fiddle

Answer 2

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

Now you should add question in javascript tag about : "how to make an edit in that cell"