6 html
这是一个示例文本
Label: Some-text-here
Run Code Online (Sandbox Code Playgroud)
我怎么能拥有它所以当我三次点击它试图突出显示的行只有一些文本 - 这里而不是整行?我发誓我以前用css看过它,我只是想不出办法
<span style="float:left">Label</span><span style="float:left">Some-text-here</span>
Run Code Online (Sandbox Code Playgroud)
这在某种程度上是 AXO 答案的扩展,但完美的 CSS 规则是user-select: contain;,这将防止选择跨越元素边界。但是,此值仅在 IE/Edge 中受支持。
user-select: all;和的一个有趣的属性user-select: none;是,all只需单击一下即可突出显示整个元素,并且all可以将其放入内部,从而创建与使用 将所需元素放在父元素中none类似的效果。如果您想要防止被选择的元素之间也有裸文本,则这特别有用,但请注意,使用此解决方案,选择仍然可以扩展到父元素之外,跳过它,因此它并不真正包含选择。containuser-select: all;user-select: none;
例子:
.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;
}Run Code Online (Sandbox Code Playgroud)
<p class="unselectable">Some extra text: <span class="selectall">ID-12345_678</span></p>Run Code Online (Sandbox Code Playgroud)
如果您使用浮动来将文本彼此相邻放置,它们仍将被视为单独的段落并实现所需的结果。
<html>
<body>
<div style="float:left">Label:</div>
<div style="float:left">some text here</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)