溢出选择突出显示

Posted 2023-03-06

【中文标题】溢出选择突出显示

【英文标题】：Overflowing select highlight

【发布时间】：2012-12-15 23:13:54

【问题描述】：

选择高亮溢出超出父元素的逻辑是什么？

在随附的屏幕截图中，顶部是我目前拥有的，底部是我想要实现的 Photoshop 模型。

在我看来，选择突出显示几乎是随机的；我无法找到任何明确的资源来解释是什么使选择突出显示以何种方式表现。

如果想要保持选择突出显示的合理性，在 CSS 和 DOM 方面我应该注意什么？

【问题讨论】：

我不相信你可以用 CSS 或 javascript 来影响它。但我有兴趣被证明是错误的。

检查一下：jsfiddle.net/dHaBJ 不过只能在 Chrome 中工作（可以看到不同）。没有 Safari 可供我检查。

小提琴在这里； jsfiddle.net/TFvYu - 我确实注意到 overflow: hidden 有一些效果，但我不知道它是如何跨浏览器的，以及是否还有其他需要考虑的因素。

@EmphramStavanger jsfiddle.net/TFvYu/2 添加 overflow:hidden 有助于 Chrome (23)。 Firefox(17.0.1) 的选择将始终受到限制；这里没有 IE 和 Safari（Linux 机器）。不知这是不是WebKit的渲染方式。

嗯...有趣。您能想到将overflow: hidden 添加到页面中的所有p 元素的任何意外副作用吗？

【参考方案1】：

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

实际上，SO 确实在依赖 overflow: auto; 的 <code> 块中包含突出显示。 <blockquotes> 没有包含突出显示。

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

overflow: hidden; 或 overflow:auto; position: relative; float:left; 或 float:right;

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

工作示例： 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