How to limit the HTML selection range for the text itself

Question

This question has long bothered me from time to time.

When we insert a paragraph / list / range into a div, we expect users to be able to select only text, not the entire horizontal block on the web page.

But when I create a web page, what I get when choosing text is below:

Is there a way to limit the range of user selection via html or CSS? Or is it a way to structure divs that is causing the problem?

Ideal situation:

Answer 1

It seems that only Chrome creates a full selection of page widths, as in fig. 1. Firefox, Opera, and IE 10 handle this, as in Figure 2. 2. ( Test yourself .)

There is a non-standard CSS property that can give the expected result: user-select: element (supported by Webkit, Firefox and IE 10 with respected prefixes); it limits the selection to the borders of the selected element. However, do not use it: Webkit does not support the value of element , and other browsers work the way you want.

---

Update

It looks like float: left or position: relative "fix" the text in Chrome. ( See script .)