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

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

你不能改变突出显示算法的机制。高光横跨填充物和边距，这有时令人讨厌。您可以做的是阻止使用CSS进行任何文本选择

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

---

我的强迫症部分也对此感到好奇：我注意到的唯一一件事（尽管这绝不是一个全面的解决方案）是，浮动元素表现出你所追求的行为。显示一个实时版本（下面的屏幕截图），其中两个

div

相同，但其中一个具有声明

float:left，防止文本突出显示跨越整个页面

如果这对您来说是一个足够大的问题（尽管我不这么认为），您可以浮动主容器以确保文本高亮显示受到约束@索伦迪尔的“解决方案”似乎是大刀阔斧，引入了一个巨大的可用性缺陷（无法选择文本是多么烦人），只为了一个小小的视觉烦恼


更新：根据@AndreZS的回答，除了默认的
静态
之外，添加一个
位置
值也会将文本突出显示限制在该元素上（我认为这种行为在我最初回答之后的几年中发生了变化）。需要熟悉WebKit的人来解释触发所需行为的确切原因：似乎与元素的布局和绘制方式有关。
在.css文件中使用
位置：相对

.content{
  display:inline-block;
}


CherryFlavourPez使用float的解决方案会导致进一步的复杂化，比如容器不会根据内部的float div拉伸。
我同意，谢谢你的精彩帖子。所以基本上元素中的浮动元素可以解决这个问题，很有趣。我不知道你可以这么做，也许有一天我会找到一个地方使用它的。哈哈，谢谢你的回复