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

时间:2011-09-22 06:38:16

标签: css

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

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

3 个答案:

答案 0 :(得分:2)

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

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

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

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

答案 1 :(得分:1)

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;}

答案 2 :(得分:0)

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