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

标签 html css

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

最佳答案

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

如果这对您来说是一个足够大的问题(尽管我会另外说),您可以 float 您的主容器以确保文本突出显示受限于它。 @solendil 的“解决方案”似乎矫枉过正,为了轻微的视觉烦恼而引入了巨大的可用性缺陷(无法选择文本是多么烦人)。

Text highlighting in Chrome

更新:根据@AndreZS 的回答,添加一个 position 值而不是默认的 static 也会限制文本突出显示到该元素(我认为自从我最初的回答以来,这种行为已经发生了变化)。需要熟悉 WebKit 的人才能解释触发所需行为的确切原因:似乎与元素的布局及其绘制方式有关。

关于HTML/CSS如何防止突出显示文本跨越谷歌浏览器中的整个页面宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8239129/

相关文章:

CSS 在小屏幕上两栏变成一栏

javascript - 如何设置js为背景?

html - 如何在 Silverlight 文本 block 中显示简单的 HTML?

javascript - 动态创建 html 来获取图像 - 我想在提交之前显示检索到的图像

javascript - 上传后显示文件名

javascript - 循环 div 动画

html - 如果我这样做有什么问题?

css - 使用 CSS 更改输入的 HTML5 占位符颜色在 Chrome 上不起作用

jquery - 使用 bxSlider 进行平移缩放不集中缩放

javascript - 更改 Google 云端硬盘文档中第一张图片的 CSS