首頁 > web前端 > css教學 > css怎麼禁止選中文字

css怎麼禁止選中文字

青灯夜游
發布: 2023-01-05 16:12:30
原創
8993 人瀏覽過

在css中,可以使用user-select屬性來禁止選取文字,只需為文字文字元素新增「user-select:none;」樣式即可。 user-select屬性可以設定或檢索是否允許使用者選取文本,當值為「none」時表示文字不能被選擇。

css怎麼禁止選中文字

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css中,可以使用user-select屬性來禁止選取文字。

user-select屬性設定或檢索是否允許使用者選取文字

語法:

user-select:none |text| all | element
登入後複製

屬性值:

  • ##none:文字不能被選擇

  • text:可以選擇文字

  • all:當所有內容作為一個整體時可以被選擇。如果雙擊或在上下文上點擊子元素,那麼被選取的部分將是以該子元素向上回溯的最高祖先元素。

  • lement:可以選擇文本,但選擇範圍受元素邊界的限制

禁止選取文字的程式碼

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;
}
登入後複製

#補充:js方法:

ontouchstart="return false;"
登入後複製
在需要禁止的dom上加入這段程式碼,兩種方法對於安卓和IOS的支援沒有單獨測試過。兩個同時使用,對於安卓和IOS可以起到禁止作用。

(學習影片分享:

css影片教學

以上是css怎麼禁止選中文字的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板