重叠内容可编辑跨度答案

【问题标题】：Overlapping contenteditable spans重叠内容可编辑跨度
【发布时间】：2017-05-09 13:06:19
【问题描述】：

一些内容可编辑框与其他框重叠，因此并非所有框都是可编辑的。我想在跨度位置保留与中心对齐的文本，如下所示。我如何做到这一点？

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

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

【问题讨论】：

你在上面的代码中做错了。首先，您想要一个跨度低于另一个还是彼此相邻？
我需要他们每个人都处于他们现在的位置
在这种情况下，您需要做的就是从您的样式中删除所有内容span { }。您已经使用top 和left 对跨度进行了positioned。没有必要使用margin: auto 再次定位它（它会适得其反），绝对不是width: 100%
但是文本不会居中对齐
以什么为中心？在您的情况下，text-align: center 也没有将文本与中心对齐。您已经将top: 26.8%; left:41% 赋予元素，因此它不会是中心。简单来说你不能同时使用position和center。就像首先你将元素推到左边然后你告诉它不是中心。当然不会，因为你之前推送过。

标签： html css contenteditable

【解决方案1】：

ContentEditable 是用于在网络浏览器中编辑富文本的本机小部件。假设您想要一个跨度低于另一个，这就是您编写文本编辑器的方式。您可以用这个here 替换您的代码。以这种方式实施后，您不必担心对齐问题。您可能会发现 this 链接也很有帮助。

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

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 中的差异。当您使用 contenteditable 定义位置时，其内联属性将接管您的 span 类属性。因此，对齐它的唯一可能方法是删除 contenteditable 标签以带来 span 类属性的效果。

【讨论】：

我不希望他们一个在另一个之下，我需要他们的对齐方式
我已根据您理解的要求编辑了答案。希望对您有所帮助。
感谢您的帮助，在您给我的示例中，文本未与中心对齐
请检查上面答案中的编辑2。
在下面发布了我的解决方案

【解决方案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;
});

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

【讨论】：