表格单元格中的contenteditable div，文本省略号在IE11中不起作用

Question

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

<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>

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

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;
}

这是一个jsbin，显示它正常工作。

它适用于大多数浏览器，但我们必须支持IE11，在IE11中，它会切断所有文本，只显示省略号。

问题似乎是表格单元格包含contenteditable的div并将该属性设置为false会使一切显示正常，但我们希望这些单元格可以编辑，因此我们需要一种解决方法。

是否可以在IE11中使其工作？

Answer 1

您在contentEditable的父容器上使用省略号在Safari中也不适合我，省略号最终在可编辑内容中：

我希望这是一个从未真正设计为一起工作的功能冲突。你最好有一个＆＃34;只读＆＃34;查看表格单元格中省略号（elipsed？）的内容，并在有人点击它时打开弹出编辑器。

如果您确实必须在单元格内编辑文本，则可以在javascript中在只读ellipsis和contentEditable模式之间切换。

此jQuery example适用于IE11和Safari（未经测试的其他浏览器）。由于contentEditable div在点击操作发生时无法观察光标的位置，所以插入符号会在焦点处跳转到最后。

Answer 2

您可以尝试删除white-space: nowrap;属性，这应该可以解决问题。

<强> JSBIN DEMO

另一种选择是像这样增加宽度：

max-width: 500px;

<强> JSBIN DEMO

Answer 3

您的代码实际上可以在我的IE11中运行...删除white-space: nowrap;会破坏所有浏览器的功能。