html - 限制文本选择区域

Question

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

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

如何使用 div 实现此目的？

编辑:请参阅www.duncannz.com并尝试突出显示文本。我希望选择的内容仅位于内容区域内，而不是填充页面的宽度(例如选择背景不会超过黑色边框)

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