HTML/CSS如何防止在Google Chrome中突出显示整个页面宽度的文本

Question

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

Answer 1

我的OCD部分也想知道这一点:我注意到的唯一一件事(虽然这绝不是一个全面的解决方案)是浮动的元素表现出你所追求的行为.这个小提琴显示了一个实时版本(下面的截图),其中两个divs是相同的,除了一个具有声明float: left;,这可以防止文本突出显示跨越整个页面.

如果这对你来说是一个足够大的问题(虽然我会另外说),你可以浮动你的主容器,以确保文本突出显示受到限制.@ solendil的"解决方案"似乎是一个巨大的矫枉过正,为了一个小的视觉烦恼引入了一个巨大的可用性缺陷(不能选择文本有多烦人).

更新:根据@ AndreZS的回答,添加position默认值以外的值static也会将文本突出显示限制为该元素(我认为此行为自我原始答案以来已发生变化).需要熟悉WebKit的人来解释触发所需行为的确切原因:看起来与元素的布局以及如何绘制元素有关.

Answer 2

在.css文件中使用position: relative;包含文本的div部分.