HTML / CSS如何防止高亮显示文本跨越Google Chrome的整个页面宽度 [英] HTML/CSS How to prevent highlighting text from spanning entire width of page in google chrome

问题描述

基本上，当我在某些网站上使用Google Chrome和突出显示文字时，突出显示会跨越浏览器的整个宽度，而不仅仅突出显示文字。如何调整CSS以使它突出显示文本时，它只突出显示单词，而不是横跨整个页面。要查看的一个好例子是 http://guides.rubyonrails.org/getting_started.html 。尝试在Google Chrome中突出显示非代码文字，您可以看到我在说什么。

Basically when I use Google chrome and highlight text on some websites, the highlight spans the entire width of the browser rather than just highlighting the text. How can CSS be adjusted to make it so that when you highlight text, it only highlights the words rather than span across the entire page as well. A good example to look at is http://guides.rubyonrails.org/getting_started.html. Try highlighting non-code text in Google chrome and you can see what I am talking about.

推荐答案

我的OCD部分也想知道这一点：我注意到的唯一的事情（虽然这不是一个全面的解决方案）是浮动的元素表现出你的行为。 这个小提琴显示了一个直播版本（下面的屏幕截图），两个 divs 是相同的，除了有一个声明 float：left; ，这可以防止文本突出显示跨整个页面。

The OCD part of me has wondered this as well: the only thing I've noticed (though this is by no means a comprehensive solution) is that floated elements exhibit the behaviour you're after. This Fiddle shows a live version (screenshot below) whereby the two divs are identical save that one has the declaration float: left;, which prevents text highlighting from spanning the entire page.

如果这是一个足够大的问题（虽然我会说不然），你可以浮动你的主容器，以确保文本突出显示被限制。 @ solendil的解决方案似乎是大规模的过度杀戮，引入了一个巨大的可用性缺陷（如何恼人，无法选择文本）为了轻微的视觉烦恼。

If it's a big enough issue for you (though I'd say otherwise), you could float your main container to ensure that text highlighting is constrained to it. @solendil's "solution" seems to be massive overkill, introducing a huge usability flaw (how annoying to not be able to select text) for the sake of a minor visual annoyance.

更新：根据@ AndreZS的回答，添加除了默认值 static 之外的位置突出那个元素（我认为这种行为在我的原始答案后的几年中已经改变）。这将需要熟悉WebKit的人来解释正在发生什么，以触发所需的行为：看起来像一些元素的布局和它是如何绘制。

Update: as per @AndreZS's answer, adding a position value other than the default static also restricts the text highlighting to that element (I think this behaviour has changed in the years since my original answer). It would take someone familiar with WebKit to explain what exactly is going on to trigger the desired behaviour: seems like something to do with the layout of an element and how it is being drawn.

这篇关于HTML / CSS如何防止高亮显示文本跨越Google Chrome的整个页面宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！