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

Question

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

Answer 1

我的OCD部分也想知道这一点：我唯一注意到的事情（尽管这绝不是一个全面的解决方案）是浮动的元素表现出你所追求的行为。 This Fiddle显示了一个实时版本（下面的屏幕截图），其中两个divs是完全相同的，除了一个具有声明float: left;，这可以防止文本突出显示跨越整个页面。

如果它对你来说是一个足够大的问题（虽然我不这么说），你可以浮动你的主容器，以确保文本突出显示受到限制。 @ solendil＆＃34; s＆＃34;解决方案＆＃34;似乎是一种巨大的矫枉过正，为了一点点视觉烦恼而引入了一个巨大的可用性缺陷（不能选择文本有多烦人）。

更新：根据@ AndreZS的回答，添加默认position以外的static值也会限制文本突出显示到该元素（我认为自从我的原始答案以来，这种行为发生了变化）。需要熟悉WebKit的人来解释触发所需行为的确切原因：看起来与元素的布局以及如何绘制元素有关。

Answer 2

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

Answer 3

您无法改变突出显示算法的机制。突出显示跨越填充和边距，有时令人讨厌。您可以做的是阻止使用CSS选择任何文本

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

Answer 4

.content{
  display:inline-block;
}

http://jsfiddle.net/V7ahp/4/

CherryFlavourPez使用float的解决方案会导致进一步的复杂化，就像容器不会根据里面的浮动div拉伸。