HTML/CSS 如何防止在谷歌浏览器中突出显示文本跨越整个页面宽度答案

【问题标题】：HTML/CSS How to prevent highlighting text from spanning entire width of page in google chromeHTML/CSS 如何防止在谷歌浏览器中突出显示文本跨越整个页面宽度
【发布时间】：2012-01-04 13:32:46
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

您无法更改突出显示算法的机制。高光跨越填充和边距，这有时很烦人。您可以做的是防止使用 CSS 进行任何文本选择

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

【讨论】：

不知道你能做到这一点，我可能有一天会找到一个地方使用这个哈哈，谢谢你的回复

【解决方案2】：

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

如果这对您来说是一个足够大的问题（尽管我会说其他），您可以浮动您的主容器以确保文本突出显示受到限制。 @solendil 的“解决方案”似乎有点矫枉过正，为了轻微的视觉烦恼，引入了一个巨大的可用性缺陷（无法选择文本多么令人讨厌）。

更新：根据@AndreZS 的回答，添加position 值而不是默认的static 也会限制突出显示该元素的文本（我认为这种行为在此后几年发生了变化我原来的答案）。需要熟悉 WebKit 的人来解释触发所需行为的确切原因：似乎与元素的布局及其绘制方式有关。

【讨论】：

我同意，感谢您的精彩帖子。所以基本上元素中的浮动元素可以解决这个问题，有趣。

【解决方案3】：

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

【讨论】：

【解决方案4】：

.content{
  display:inline-block;
}

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

CherryFlavourPez 使用浮动的解决方案会导致进一步的复杂性，例如容器不会根据内部的浮动 div 进行拉伸。

【讨论】：