有些時候我們需要禁止網頁的部分文本不能被選擇。你可以使用user-select這個CSS特性來實現這個需求。

舉例

下面是一個使用了disable-selection類的樣式規則，當它作用于一個HTML元素的時候，它會讓我們不能夠選擇這個元素。

.disable-selection{

-moz-user-select:none; /* Firefox */

-ms-user-select:none; /* Internet Explorer */

-ktml-user-select:none; /* KHTML瀏覽器(比如：Konqueror) */

-webkit-user-select:none; /* Chrome,Safari,and Opera */

-webkit-touch-callout:none; /* Disable Android and IOS callout */

}

關于這些樣式的一些細節的解釋：

-webkit-user-select是給Chrome,Safari和Opera用的(并不需要使用-o-user-select)。

沒有前綴的user-select是被故意略去的。

-webkit-touch-callout屬性可以讓在移動設備上的觸摸后彈出失效。就像下面的這些，我們可以讓它們不能出現。

演示

要時常記住的

有一個陷阱就是：user-select并不是W3C規范中標準的CSS特性。盡管user-select通過添加瀏覽器前綴有很好的瀏覽器支持。

前面的例子中，我沒有使用沒有前綴的user-select特性聲明。那是因為在web標準中根本就沒有這個屬性。我們可以對它的使用類比于于IE專有的CSS屬性ms-filter或者-ms-text-kashida-space的屬性的使用。

其他需要注意的地方：

user-select是有問題并且是不穩定的。有些時候你依然還是可以選擇文本，特別是當你從沒有被屏蔽掉文本選擇的文本的那部分開始選擇。

使用全選快捷鍵有些時候還是會把屏蔽文本選擇(Win:Ctrl+A/Mac:Cmd+A)。這種情況你可以在IE11中清楚的了解到。

這不是一種萬全的保證文本不被選擇的策略。CSS能夠很容易被屏蔽。這種技巧依賴于非標準的CSS特性，這意味著未來對這個屬性的可持續支持上面存在著很大的不確定性。

屏蔽掉文本選擇是很惱人的。我會在漸進提升的過程中使用這個技巧：只有當它可以提高使用支持這個user-select特性的瀏覽器和設備的用戶的用戶體驗的時候才使用它。但是，我絕不會把它設置成一個大范圍的CSS選擇器像全部選擇器(*)或者body.

這個user-select特性可能會讓你的樣式表失效。如果遵循標準對你來說非常重要，使用這個屬性會在你使用規范測試比如說CSS Validation Service的使用出現問題

瀏覽器支持

更新于：2015年3月

瀏覽器

版本支持(以上)

Chrome

6

Firefox

2

IE

10

Safari

3.1

移動端

瀏覽器

版本支持(以上)

Chrome(Android)

2.1

Safari(IOS)

3.2

總結

以上是生活随笔為你收集整理的html禁止文本选择,[译]用CSS来禁止文本选择的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。