contenteditable div在一个表单元格与文本省略号不工作在IE11 [英] contenteditable div in a table cell with text-ellipsis not working in IE11

问题描述

我在表格单元格中有以下标记：

 < td class =name> 
< img width =22height =22src =http://res.cloudinary.com/radium/image/upload/c_fill,g_face,h_22,w_22/v1/default_avatars/large。 jpg> 
< div class =editablecontenteditable =true> 
这是一个很长的文本，我们要使用省略号
< / div> 
< / td> 
  

我有以下样式在表格单元格中向长文本添加省略号：

 表tr td.name {
 max-width：220px; 
 background-color：white; 
 border-right：1px solid＃e6e6e6; 
 border-bottom：1px solid＃e6e6e6; 
 margin：0！important; 
 text-overflow：ellipsis; 
 overflow：hidden; 
 white-space：nowrap; 
} 
  

这里是适用于IE11和Safari（其他浏览器未测试）。由于 contentEditable div无法在点击操作发生时观察光标的位置，因此插入符号跳到焦点结束。

I have the following markup in a table cell:

<td class="name">
  <img width="22" height="22" src="http://res.cloudinary.com/radium/image/upload/c_fill,g_face,h_22,w_22/v1/default_avatars/large.jpg">
  <div class="editable" contenteditable="true">
    This is a very long piece of text we want to use an ellipsis with   
  </div>
</td>

I have the following style to add an ellipsis to long text in a table cell:

table tr td.name {
  max-width: 220px;
  background-color: white;
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  margin: 0 !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Here is a jsbin that shows it working.

It works in most browsers but We have to support IE11 and in IE11, it cuts off all the text and just shows the ellipsis.

The problem seems to be that the table cell contains div that is contenteditable and turning that attribute to false makes everything display fine but we want these cells to be editable so we need a workaround.

Is it possible to make this work in IE11?

解决方案

Your use of ellipsis on a parent container of a contentEditable also doesn't work for me in Safari, the ellipsis ends up inside the editable content:

I expect this is a conflict of features that were never really designed to work together. You would be better off having a "read-only" view of the ellipsised (elipsed?) content in the table cell, and open a pop-up editor when someone clicks on it.

If you really must have the text editable inside the cell, you could toggle between read-only ellipsis and contentEditable modes in javascript.

This jQuery example works in IE11 and Safari (other browsers not tested). The caret is jumped to the end on focus because the contentEditable div was not able to observe the position of the cursor at the time the click action occurred.

这篇关于contenteditable div在一个表单元格与文本省略号不工作在IE11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！