Menu
This question has long bothered me from time to time.
When we crate a paragraph/list/span within a div, we expect users to be able to select only the text, instead of the entire horizontal block on the webpage.
But when I create a webpage, what I get when selecting text is below:
Is there anyway to limit users' range of selection through html or CSS? Or is it the way I structure the divs that causes the problem?
The ideal situation:
748
The secret code To force a web browser to treat 2 separate words as if they were 1, use the code instead of a space, like so: These two words are like one.
You can force the content of the HTML <div> element stay on the same line by using a little CSS. Use the overflow property, as well as the white-space property set to “nowrap”.
If you want to limit the text length to one line, you can clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.
If overflow is set to hidden then any overflow will not be visible. This content is outside of the box.
It looks like only Chrome creates a full-page-width selection like on a pic. 1. Firefox, Opera, and IE 10 deal with it like on a pic. 2. (Check yourself.)
There is a non-standard CSS property which may give the expected result: user-select: element (supported by Webkit, Firefox, and IE 10 with respected prefixes);
it restricts selection to the bounds of the selected element. However there is no use of it: Webkit doesn't support element value, and other browsers already work like you want.
Looks like float: left or position: relative "fix" text selection in Chrome. (See fiddle.)
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
