使用CSS定义文本选择突出显示

Question

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

如何使用当用户选择并阻止文本时，左右区域也不会被选中？在我的情况下，我尝试将包含标记的文本（和<article>标记）包含在<div>中，但我没有看到任何更改。

Answer 1

我知道这已经很老了，但我想我会发出声音，万一我的解决方案可以帮助未来的任何人。

我遇到了同样的问题，其中文本选择包括div元素内的填充。我试过@Joseph Marikle的解决方案;但是，我有浮动的其他元素浮动解决方案存在问题，并且使用绝对定位不是一种选择。

然后我尝试了从页面流中删除元素（我的案例中为p元素）的方法。我登陆SO question并决定在我的p元素上尝试相对定位，它似乎产生了预期的效果。

这是展示结果的CodePen。第二个p元素应用了相对定位，文本选择受到约束。

Answer 2

mgunadi，欢迎来到SO

这里发生的事情是你有一个中心方法留下余量。当您在浏览器中突出显示文本时，它还会选择边距。通过更改内容中心的方式，可以在一定程度上修复此问题。例如，如果您使用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;}

Answer 3

CSS不提供此功能。这是浏览器本身的功能。