溢出选择突出显示

Question

选择的逻辑是什么，突出显示超出父元素的溢出？

在附带的截图中，顶部的是我目前所拥有的，最下面的是我想要实现的Photoshop模型。

对我而言，选择突出显示几乎是随机的;我无法找到任何明确的资源来解释什么使选择突出显示在哪些方面表现。

当想要保持选择突出显示合理时，我应该在CSS和DOM方面记住什么？

Answer 1

有趣的是，我想知道为什么SO没有这样的东西所以更容易从问题/答案中复制代码。

实际上，SO确实包含依赖于<code>的{​​{1}}块中的突出显示。 overflow: auto;没有包含突出显示。

无论如何，似乎有几种方法可以解决这个问题（不过，我相信可能会有更多）。使用以下CSS规则之一将文本突出显示限制为特定元素。

• <blockquotes>或overflow: hidden;
• overflow:auto;
• position: relative;或float:left;

下面的工作示例显示了所有四种方法。根据您的需要，有些更容易使用。

工作示例： http://jsfiddle.net/TFvYu/4/

<强>来源

• CSS text selection color overflows outside box
• HTML/CSS How to prevent highlighting text from spanning entire width of page in google chrome