使 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 文本。

.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*/
}

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

user-select 的行为不一致

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

From the MDN（强调我的）：

非标准

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

作为这种不可靠性的一个例子，您网站上的 user-select 属性在 Windows 上的 Chrome 39 中对我来说似乎工作得很好:)

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

目前用户选择属性没有出现在任何 W3C 规范中。此处的支持信息仅适用于“无”值，不适用于其他值。