具有contenteditable属性的跨度不会在IE11中充当内联元素

问题描述

我在宽度受限的 div 中有两个 span 元素。
两者的文本内容无缝地合并为一个连续的段落。

I am having two span elements inside a div that has limited width.The text content of the two merge seamlessly into one continuous "paragraph".

但是，我需要第二个 span 成为 contenteditable = true 。

However, I need the second span to be a contenteditable="true".

但是当我添加属性时，文本第二个元素的元素从IE11中的新行开始。

But when I add the attribute, the text of the second element starts from a new line in IE11.

<div style="width:200px">
  <span>4.5</span> <span contenteditable="true">Test this simple layout in IE11 and see the wonders of the internet!</span>
</div>

这是供您使用的JsFiddle：

Here is the JsFiddle for you to play with: https://jsfiddle.net/enoq0xk3/

是否有已知的解决方法？

Is there any known fix for that?

推荐答案

确定。
我有针对我的情况的修复程序：

OK.I have a fix for my case:

[contenteditable=true]:before {
  content: attr(before-content);
  margin-right: 2px;
}

<div style="width:200px">
  <span before-content="4.5" contenteditable="true">Test this simple layout in IE11 and see the wonders of the internet!</span>
</div>

这使第一部分不可编辑，其余部分可编辑。

This keeps the first part non-editable and the rest editable.

虽然UX仅在IE上很不错...所以您需要相应地切换实现。

The UX is only good on IE though... so you need to switch implementations accordingly.

这篇关于具有contenteditable属性的跨度不会在IE11中充当内联元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！