使用CSS定义文本选择高亮显示

Question

我正在制作一个网站，但在设计CSS时遇到了问题。它类似于这张图片所示的那个：
。

我该如何做才能让用户选择和阻止文本时，其右侧和左侧的区域不被选中？在我的情况下，我尝试将包含标签的文本（以及

标签）包装在

中，但我没有看到任何变化。

- mgunadi

---

这个问题属于stackoverflow。 - Joonas

mgunadi- 欢迎来到GD。这个问题实际上与设计无关，更多的是关于浏览器行为。正如Lollero所说，这个问题在SO上可能会有更好的运气。此外，仅凭一张图片就无法告诉您出了什么问题，因此您的问题可能需要改进。 - Farray

另一方面，这是关于一个使设计丑陋的问题，并且可能通过 CSS 调整得到挽救（根据 FAQ 不算完全离题）。 - Jari Keinänen

Answer 1

我知道这已经很老了，但我想说一下我的解决方案，以防我的解决方案可能帮助到任何人。

我遇到了同样的问题，即文本选择包括 div 元素内部的填充。我尝试了 @Joseph Marikle 的解决方案；然而，我有其他被浮动的元素，这些元素与浮动解决方案有问题，并且使用绝对定位不是一个选项。

然后，我尝试寻找从页面流中删除元素（在我的情况下为 p 元素）的方法。我看到了这个 SO question 并决定在我的 p 元素上尝试 相对定位，看起来可以产生预期的效果。

这里有一个 CodePen，演示了结果。第二个 p 元素应用了相对定位，并且文本选择被限制。

- doubleswirve

Answer 2

欢迎来到SO，mgunadi。

这里发生的情况是您有一个居中方法，留下了一个边距。当您在浏览器中突出显示文本时，它也会选择边距。通过改变内容居中的方式，可以在一定程度上解决这个问题。例如，如果您使用position:absolute解决方案，则不需要此边距，并且在突出显示时不会被选择（演示：http://jsfiddle.net/FX45g/）。不幸的是，如果这不是一个选项，您必须使用边距来居中内容，那么这是一个浏览器问题，完全取决于特定浏览器的处理方式。

要使用定位居中内容，内容必须具有固定宽度（对于此示例为300px）。然后，您可以应用以下规则：

.centered
{
    position:absolute;
    left:50%;
    margin-left:-150px;
}

编辑

找到了另一种方法。 :P 一个包装器！（借助浮动）

http://jsfiddle.net/hSpBw/

.wrapper{margin:0 auto; width:300px;}
.wrapper>div {float:left;}

- Joseph Marikle

---

这对我在FF6和IE8的两个例子中完全一样的亮点...啊哈！但在Chrome中不是！我想+1，但绝对定位真的是唯一的解决方法吗？ - Wesley Murch

@WesleyMurch 我也有这个疑虑。谢天谢地，在FF中它可以正确地呈现。这是（据我所知）仅限于Chrome的问题。:P 它可能存在于其他浏览器中，但我只在Chrome中看到过。 - Joseph Marikle

据我所知，@WesleyMurch。:( 我想不到其他的方法来做这件事。 - Joseph Marikle

没错，+1。由于这是一个浏览器问题，涉及到文本选择，我认为这并不太重要。如果我们能够解决它 - 那太好了。如果不能 - 除非它实际上导致了意外的行为，比如复制空格（在这种情况下似乎不是这样），否则也没有什么大不了的。 - Wesley Murch

@WesleyMurch 我找到了另一种不使用position:absolute的方法 :P - Joseph Marikle

Answer 3

CSS并不提供这个功能。这是浏览器本身的一个功能。

- Diodeus - James MacFarlane

---

CSS 可以 解决这个问题。所有发生的事情就是 margin 被突出显示了。 - Joseph Marikle