1

我无法将 chrome 中的选择包含到 div 中。它想让它更广泛。游乐场在这里：http: //jsbin.com/ujafow/28/

如果您在我的示例中从 1.2(a) 到 1.2 进行选择，您可以看到选择边框一直延伸到 1....那。有趣的是，它并没有一直延伸到外部 div 的边缘，所以必须有某种方法来包含它？其他浏览器（例如 ie）似乎只是选择文本，一切都是 hunky dory。

有人知道我需要做什么才能使其保持在逻辑边界内吗？

PS。我尝试使用具有相同结果的列表：http: //jsbin.com/ujafow/7 PPS。表格工作得很好，但它是 contentEditable ，所以这让我的事情变得复杂，因为我不希望他们不得不编辑表格。聚苯乙烯。Chrome 中存在一个长期突出的缺陷。

编辑：看起来它将选择绘制到任何内容可编辑的边缘 - 如果我使整个内容可编辑，它会直接绘制到边缘。唯一似乎阻止它的是，如果左侧有一个 div...也许我可以在任一侧放置一个空 div 以将选择的绘制限制在该区域...？

4

3 回答 3

1

看起来添加overflow: hidden;到.npseCSS 中会修复它。

我以前一直在尝试您的解决方案......它有效，但使用起来非常尴尬。但是，如果这是正确的，请不要感谢我...在这里感谢@ralph.m，他回答了我对问题的扩展：

::select伪元素在填充空间中被忽略，选择超出范围......？

只需提供它作为关闭循环的答案，这样您就可以接受它，如果它是正确的 - 以节省其他人遇到这个问题的时间！

于 2014-03-13T03:30:44.887 回答
0

只需从您的标题跨度中删除“contenteditable=false”。至少，这对我有用。

编辑：让它工作。检查这里。 你只需要弄清楚如何去除可变尺寸和角落里的小东西。

textarea {
background:transparent;
border:none;
}
textarea:focus {
border:none;
outline:none;
}

编辑编辑：使用这个

textarea {
resize: none;
}

编辑 编辑 编辑：好的，终于明白了。

<p  contentEditable="true"><span class="counter" 
contentEditable="false">1.2</span>Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Cras scelerisque molestie nisi, ut accumsan libero rutrum non. Ut non scelerisque 
lacus. Proin ornare rhoncus lobortis. Nullam id laoreet justo, et bibendum justo. Etiam 
luctus ligula faucibus, eleifend augue tempor, dapibus nunc.</p>

它在这里工作。只需从正文中删除“contenteditable”并将其添加到每个单独的元素中。不过，您必须删除 :focus 上的边框和轮廓。

PS: :P :D 强迫症

于 2013-08-05T08:09:50.217 回答
0

I ended up solving this by putting an absolute positioned div to the left of it (which I've called the "title-container" in the code below). It then contains the selection nicely. The title-container div is a child of the elementToContain div. The size of the div's is set via js.

.elementToContain {
    position: relative;
    padding: 0.5em; 
}

.title-container {
    position: absolute;
    top: 0em;
    bottom: 0em;
    border: ridge red 0.1em;
    left: 0;
    padding-right: 0.25em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -user-select: none;
}
于 2013-08-15T23:30:51.120 回答