使div中的文本可选，但使父div不可选（wordpress）

Question

我正在尝试创建一个结果文本框，其中包含用户希望选择和复制的文本。我不能使用textarea因为我需要文本来支持html标记。我有三个嵌套的div，包含以下类：entry-content，content-area和selectme。我希望用户能够只选择最里面的div selectme，而不是将选择区域扩展到两个父div。以下代码似乎在JSfiddle上正常工作，但是当我将相同的CSS应用于my wordpress page时，我没有得到相同的效果。想法？

.entry-content {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.site-main {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.selectme {
 -moz-user-select: text;
 -khtml-user-select: text;
 -webkit-user-select: text;
 -ms-user-select: text;
 user-select: text;
 }

Answer 1

使用display: inline-block

防止丑陋的选择

要在突出显示时防止在框外部着色，请在可编辑容器上使用display: inline-block。选择仅适用于div文本。

＆＃13;

＆＃13;

.content-area {
  width: 300px;
  height: 300px;
  border: 1px solid;
  box-sizing: border-box;
  padding: 2px;
  margin: 0 auto;
}
.selectme {
  width: 150px;
  height: 150px;
  border: 1px solid;
  box-sizing: border-box;
  padding: 2px;
  display: inline-block; /*add*/
}

＆＃13;

<div class="entry-content">
  <div class="content-area">

    <div class="selectme">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac est risus. Nunc quis viverra lacus. Integer ut quam ac erat vulputate semper nec eget turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas facilisis posuere finibus. Aliquam ultrices ligula id pharetra tempus. Integer suscipit rutrum ex ut condimentum. Morbi non vulputate tellus, non euismod erat. Ut neque dui, pretium eu dolor in, rutrum viverra enim. Integer venenatis, neque et varius ultricies, lorem purus accumsan felis, sed egestas mauris lectus at massa. Morbi ut orci at est ultricies lacinia non sit amet eros. Pellentesque pulvinar metus ante, aliquam sollicitudin massa laoreet et.
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

user-select

的行为不一致

user-select属性不是w3c标准，并且应用不一致。

From the MDN（强调我的）：

  

非标

     

此功能不符合标准，不符合标准   跟踪。 不要在面向Web的生产站点上使用它：它不会   为每个用户工作。之间可能存在很大的不兼容性   实现和行为可能在未来发生变化。

作为此不可靠性的一个示例，您网站上的user-select属性似乎对我在Windows上的Chrome 39中运行良好：）

The none value does appear to have good support，但不应该依赖：

  

目前，用户选择属性不会出现在任何W3C规范中。此处的支持信息仅适用于＆＃34;无＆＃34;价值，而不是其他。