Html -webkit列计数给出了意外的结果

因此，我在包含多个span标记的p标记上使用-webkit列计数。 每个跨距包含一个字母

在span标记之间，还有一个可以拖动的span，因此用户可以将其拖放到任何他想要的地方

当用户将其放在p标记的边缘时，问题就开始了

发生这种情况时，图像会从帧中剪切出来

不知道为什么

我看到的一件事是，当我从可拖动跨度中移除z索引时，它突然工作正常，但第二个可拖动跨度偏离了它的位置

请看一个例子

这是我的HTML代码：

<div>
<p class="two_columns">
<span class="ui-draggable">&nbsp;</span>
Lorem ipsum sit amet, consectetur adipiscing sdfsdf consectetur adipiscing sdfsdf 
consectetur adipiscing sdfsdf elit. Praesent rhoncus tellus purus
<span class="ui-draggable">&nbsp;</span>, utfacilisis ipsum posu ere eget. Cras
susciconsectetur adipiscing sdfsdf consectetur adipiscing sdfsdfdio.</p>
</div>

---

在ui可拖动类上有一个绝对定位的：after pseudo。这将使图像漂浮在一切之上（这就是绝对定位所做的，漂浮在现有布局之上）

解决此问题的一种方法是在ui可拖动类中添加边距，以便为图标留出空间：

margin:0 15px 0 5px

我还担心为什么要使用如此多的跨距，而大多数跨距根本没有样式。如果可以的话，可以考虑去掉一些多余的。HTML元素越少，通常就越容易使事情正常运行。
很抱歉，这并不能解决我的问题，因为我希望可拖动的范围保留在它当前所在的字母上。如果我添加边距，那么可拖动跨度将改变其位置。关于你对多跨桥梁的担忧——不要这样：）
div {
    width: 80%;
    margin: 20px auto;
}

p {
    overflow: visible !important;
    margin: 0;
    -webkit-column-count: 2;
}

.ui-draggable {
    text-indent: -9999px;
    display: inline !important;
    z-index: 100;
    cursor: pointer;
    position: relative;
    font-size: 0;
    line-height: 0;
}
.ui-draggable::after {
   position: absolute;
content: '';
width: 24px;
height: 30px;
background: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQLBPLYyDEATQHLjBBl5UD-pSD9PI5rv_EAElcSPT7HGk2LKSKeAVkgCa-o") no-repeat;
cursor: pointer;
left: -10px;
top: -20px;
background-size: 100%;
}