限制文本选择区域答案

【问题标题】：Limit text selection area限制文本选择区域
【发布时间】：2012-09-08 23:37:19
【问题描述】：

例如在 GitHub 上，如果你选择代码，它只会选择代码而不是它旁边的行号：

这是因为他们使用表格 - td 中的行号和 td 中的代码。

如何使用div 实现这一目标？

编辑：请参阅www.duncannz.com 并尝试突出显示文本。我希望选择的东西只在内容区域内，而不是填充页面的宽度（例如选择背景不超过黑色边框）

【问题讨论】：

标签： html css selection

【解决方案1】：

示例：http://jsfiddle.net/gfp28/

<div>

  <ul class='no_select'>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
  </ul>

  <ul>
      <li>111111111</li>
      <li>222222222</li>
      <li>333333333</li>
      <li>444444444</li>
      <li>555555555</li>
  </ul>

</div>

CSS：

ul {
  display: inline; 
  float: left; 
  margin: 10px;
}

.no_select { 
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

如果你把它添加到你的 css 中，它应该将突出显示限制在容器的宽度：

#actualcontent, #actualcontent * { position: relative; }

【讨论】：

我确实想要文本选择，但我想限制它，如示例图片所示。
啊，好的。因此，如果我只希望页面上的一个 div 是可选的，我是否将“无用户选择”代码放在 * 上，然后 user-select: text 放在那个 div 上？
是的，这绝对是你可以做到的一种方式！
回答我的问题：是的，但它的行为仍然不像我想要的那样，在 GitHub 上也是如此。将更新问题。
如果有多个可选元素，应该分别选择哪一个呢？ jsfiddle.net/gfp28/12