css如何實現禁止選擇文本

css實作禁止選擇文字的方法是，新增user-select屬性，並且將屬性值設為none，表示文字不能被選取，具體程式碼如【user-select:none;】。

本文操作環境：windows10系統、css 3、thinkpad t480電腦。

在 web 瀏覽器中，如果我們在文字上雙擊，文字會被選取或高亮顯示。那如果我們要禁止這種行為該怎麼辦呢？其實很簡單，使用下面的屬性就可以了。

user-select 屬性規定是否能選取元素的文字。

在 web 瀏覽器中，如果您在文字上雙擊，文字會被選取或高亮顯示。此屬性用於阻止這種行為。

語法：

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

屬性值：

• #auto    預設。如果瀏覽器允許，則可以選擇文字。   

• none    防止文字選取。   

• text    文字可由使用者選取。   

• all    點選選取文本，而不是雙擊。

實作程式碼如下：

pc端：

.not-select{
    -moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none;
}

行動端：

.no-touch {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

相關影片分享：css影片教學

#

以上是css如何實現禁止選擇文本的詳細內容。更多資訊請關注PHP中文網其他相關文章！