Css 溢出选择突出显示

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

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

在我看来，选择突出显示几乎是随机的；我还没有找到任何明确的资源来解释选择突出显示的行为方式

在CSS和DOM方面，当我想要保持选择的合理性时，我应该记住什么

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

实际上，在依赖于

溢出：auto的
块中也包含了高亮显示<代码>
未包含突出显示

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


溢出：隐藏或
溢出：自动

位置：相对

float：左或<代码>浮动：右侧


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

工作示例：

来源




我不相信你能用CSS或JavaScript影响这一点。但我有兴趣被证明是错的。看看这个：只工作（在Chrome中可以看到不同的）。我不需要Safari来检查。小提琴这里；我确实注意到<代码>溢出：隐藏< /代码>有一些效果，但是我不知道跨浏览器是什么，如果还有其他因素需要考虑。@ CyrimrStavavar添加<代码>溢出：隐藏< /代码>有助于Chrome（23）。Firefox（170.1）的选择将始终受到限制；这里没有IE&Safari（Linux框）。我想知道这是否是WebKit的呈现方式。嗯……很有趣。你能想到在页面中的所有
p
元素中添加
overflow:hidden
会有什么意外的副作用吗？