Css 简明教程

CSS - user-select Property

CSS user-select 属性确定是否允许用户选择文本，不会影响加载的浏览器用户界面（画面）中内容（除了文本框），也不影响文本。

CSS user-select property determines whether text can be selected by the user, with no effect on content loaded as part of a browser’s user interface (chrome) other than textboxes.

Possible Values

  1. none − The element’s and sub-elements' text is not selectable, but these elements may be present in the Selection object.

  2. auto − The auto value is determined as follows: The value used for the ::before and ::after pseudo-elements is none. For editable elements, the used value is contain. If the parent of this element has a user-select value all, then the used value is all. If the parent of this element has a user-select value none, then the used value is none. The used value is text.

  3. text − The user can select the text.

  4. contain − Allows the selection to begin within the element, but contains the selection to the boundaries of that element.

  5. all − The content of the element must be selected atomically: If a selection contains part of an element, it must also include all of its descendants. If a double-click or context-click happens in a sub-element, the highest ancestor with this value will be chosen.

Applies To

所有元素。

All elements.

Syntax

user-select: none | auto | text | contain | all;

CSS user-select - none Value

以下示例演示了 user-select: none 属性阻止用户选择文本 −

The following example demonstrates the user-select: none property preventing users from selecting the text −

<html>
<head>
<style>
   .text-none {
      -webkit-user-select: none;
      user-select: none;
   }
</style>
</head>
<body>
   <p>This text should be selectable.</p>
   <p class="text-none">This text cannot be selected.</p>
</body>
</html>

CSS user-select - auto Value

以下示例演示了 user-select: auto 属性用来选择文本 −

The following example demonstrates the user-select: auto property used to select the text −

<html>
<head>
<style>
   p {
      -webkit-user-select: auto;
      user-select: auto;
   }
</style>
</head>
<body>
   <p>This text should be selectable.</p>
</body>
</html>

CSS user-select - text Value

以下示例演示了 user-select: text 属性允许用户选择文本 −

The following example demonstrates the user-select: text property allows the users to select the text −

<html>
<head>
<style>
   p {
      -webkit-user-select: text;
      user-select: text;
   }
</style>
</head>
<body>
   <p>This text should be selectable.</p>
</body>
</html>

CSS user-select - all Value

以下示例演示了 user-select: all 属性允许用户通过单击选择文本 −

The following example demonstrates the user-select: all property allows the users to select the text within a single click −

<html>
<head>
<style>
   p {
      -webkit-user-select: all;
      user-select: all;
   }
</style>
</head>
<body>
   <p>This text can be selected with a single click.</p>
</body>
</html>

CSS user-select - contain Value

以下示例演示了 user-select: contain 属性允许用户选择段落边界内的文本 −

The following example demonstrates the user-select: contain property allows the users to select the text within the paragraph’s boundaries −

<html>
<head>
<style>
   p {
      -webkit-user-select: contain;
      user-select: contain;
   }
</style>
</head>
<body>
   <p>This text can be selected within the paragraph's boundaries.</p>
</body>
</html>