重叠的满足的跨度

Question

某些可信任的框与其他框重叠，因此并非所有框都可编辑。我想保留与跨度位置中心对齐的文本，如下所示。我如何实现这一目标？

＆＃13;

＆＃13;

span {
  margin: auto;       
	text-align: center;
	width: 100%;
}

＆＃13;

<span contenteditable style="position:absolute; top: 26.8%; left:41%">●</span>
<span contenteditable style="position:absolute; top: 36.6%; left:41%">●</span>
<span contenteditable style="position:absolute; top: 46.4%; left:41%">●</span>
<span contenteditable style="position:absolute; top: 56.2%; left:41%">●</span>
<span contenteditable style="position:absolute; top: 26.8%; left:24%">●</span>
<span contenteditable style="position:absolute; top: 36.6%; left:24%">●</span>
<span contenteditable style="position:absolute; top: 46.4%; left:24%">●</span>
<span contenteditable style="position:absolute; top: 56.2%; left:24%">●</span>
<span contenteditable style="position:absolute; top: 26.8%; left:75%">●</span>
<span contenteditable style="position:absolute; top: 36.6%; left:75%">●</span>
<span contenteditable style="position:absolute; top: 46.4%; left:75%">●</span>
<span contenteditable style="position:absolute; top: 56.2%; left:75%">●</span>

＆＃13;

＆＃13;

＆＃13;

Answer 1

ContentEditable是用于在Web浏览器中编辑富文本的本机窗口小部件。假设您希望跨度一个在另一个之下，这就是您编写文本编辑器的方法。您可以用here替换代码。以这种方式实现后，您不必担心对齐。您可能会发现this链接也很有用。

编辑1：因为您希望保留对齐并避免重叠的可信框。这是我尝试过的东西。所有方框都是可编辑的。

Updated JS Fiddle

<强> CSS

.container {
    height: 1000px; 
    width:1000px; 
    background:white; 
    margin:50px auto;
    font-family: sans-serif;
    padding: 10px;
}

<强> HTML

<div class="container">
<span contenteditable style="position:absolute; top: 26.8%; left:41%">●</span><br>
<span contenteditable style="position:absolute; top: 36.6%; left:41%">●</span><br>
<span contenteditable style="position:absolute; top: 46.4%; left:41%">●</span><br>
<span contenteditable style="position:absolute; top: 56.2%; left:41%">●</span><br>
<span contenteditable style="position:absolute; top: 26.8%; left:24%">●</span><br>
<span contenteditable style="position:absolute; top: 36.6%; left:24%">●</span><br>
<span contenteditable style="position:absolute; top: 46.4%; left:24%">●</span><br>
<span contenteditable style="position:absolute; top: 56.2%; left:24%">●</span><br>
<span contenteditable style="position:absolute; top: 26.8%; left:75%">●</span><br>
<span contenteditable style="position:absolute; top: 36.6%; left:75%">●</span><br>
<span contenteditable style="position:absolute; top: 46.4%; left:75%">●</span><br>
<span contenteditable style="position:absolute; top: 56.2%; left:75%">●</span><br>
</div>

它给了我这样的输出：

编辑2： 我已经把text-align属性。看看这个：

1. Span tag without contenteditable

2. Span tag with contenteditable

尝试将text-align更改为两个链接中的右，左和中心并执行。您可以单独看到链接1中的差异。使用contenteditable定义位置时，其内联属性将接管span类属性。因此，唯一可以对齐它的方法是删除contenteditable标记以带来span类属性的效果。

Answer 2

我想出了一个使用jquery重新定位并使其保持居中的解决方案：

$('[contenteditable]').on('focus', function() {
    var $this = $(this);
    $this.data('before', $this.html());
    $this.data('leftbefore', $this.offset().left + ($this.width()/2));
    return $this;
}).on('blur keyup paste', function() {
    var $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
        $this.offset({ left:($this.data('leftbefore') - ($this.width() / 2))});
    }
    return $this;
});

如果有人有更好的解决方案，请告诉