CODEWITHSUNDEEP
htmlcssselection
user1318194
user1318194

Reputation:

Limit text selection area

On, for example, GitHub, if you select code it only selects the code not the line numbers next to it:

Text selection limit

This is because they use a table - the line numbers in a td and the code in a td.

How can I achieve this with a div?

EDIT: Please see www.duncannz.com and try to highlight text. I want the selection thing to only be inside the content area, not to fill the width of the page (eg selection background doesn't go past the black border)

Upvotes: 2

Views: 2414

Answers (1)

Matthew Blancarte
Matthew Blancarte

Reputation: 8301

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

If you add this to your css, it should restrict the highlighting to the width of the container:

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

Upvotes: 4

Related Questions