在CSS中,我們可以通過以下方式讓文字無法被選中:
user-select: none; // 針對所有元素
使用以上代碼后,所有元素內的文字都將不能被選中。如果只想針對某個元素使用,可以使用以下代碼:
#element{
user-select: none; // 針對id為element的元素
}
需要注意的是,user-select
屬性并不是所有瀏覽器都支持,對于不支持該屬性的瀏覽器,可以使用以下代碼:
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
但是,這種方式存在一個缺點:當需要復制元素內的內容時,無法使用鼠標復制。
如果希望只針對某些元素的部分文字不能被選中,可以使用以下方式:
.select-none{
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
在需要使用該效果的文字中添加select-none
類即可實現。同時需要注意,在一些需要選擇文本的場景下(如搜索框),應該避免使用該效果。