Here an example text
Label: Some-text-here
How can i have it so when 开发者_运维技巧i triple click the line it tries to highlight only is Some-text-here rather then the full line? I could swear i seen it done before with css i just cant think of a way
<span style="float:left">Label</span><span style="float:left">Some-text-here</span>
JsFiddle.
If you use floats to position the texts next to each other they'll still be considered separate paragraphs and achieve the desired result.
<html>
<body>
<div style="float:left">Label:</div>
<div style="float:left">some text here</div>
</body>
</html>
This is somewhat of an extension to AXO's answer, but the perfect CSS rule would be user-select: contain;, which will prevent selections from crossing the element boundary. This value, however, is only supported in IE/Edge.
An interesting property though of user-select: all; and user-select: none; is that all will highlight the entire element with a single click, and all can be put inside none, creating a similar effect to contain if you put user-select: all; on the desired element within a parent element with user-select: none;. This is especially useful if you also have bare text in between the elements which you want to prevent being selected, but note that with this solution, the selection can still expand beyond the parent element, skipping over it, so it's not truly containing the selection.
Example:
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.selectall {
-moz-user-select: all;
-webkit-user-select: all;
-ms-user-select: all;
}<p class="unselectable">Some extra text: <span class="selectall">ID-12345_678</span></p>In some situations it may also be appropriate to exempt some parts of text from selection. The experimental user-select style can be used for that purpose, like so:
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}<span class='unselectable'>Label: </span>some text hereThe simplest and most compatible approach that responds to single, double and triple clicks as expected is on the snippet below. See more here: user-select - CSS: Cascading Style Sheets | MDN
<span style="user-select: none">Label: </span><span style="user-select: text">Some-text-here</span>
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论