CSS設置文本不被選中
在網頁設計中,有些時候我們不希望用戶選中文本。比如,我們可能不希望用戶復制某個段落中的文字。在這種情況下,我們可以使用CSS來防止文本被選中。
下面是如何設置文本不被選中的方法:
方法1:使用user-select屬性
使用user-select屬性可以控制文本是否允許被選中。默認情況下,user-select屬性的值是auto,表示可以選中文本。如果我們將它設置為none,就可以禁止用戶選中文本。
以下是示例代碼:
p { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }在上面的代碼中,我們使用了前綴來支持多種瀏覽器。這樣做可以確保代碼在各種瀏覽器中都能運行。 方法2:使用selectable屬性 使用selectable屬性也可以控制文本是否允許被選中。如果我們將它設置為false,就可以禁止用戶選中文本。 以下是示例代碼:
p { -webkit-touch-callout: none; /* 禁止長按鏈接與圖片彈出菜單 */ -webkit-user-select: none; /* 禁止文字被選中 */ -moz-user-select: none; -ms-user-select: none; user-select: none; }需要注意的是,selectable屬性只在IE瀏覽器中有效,而在其他瀏覽器中沒有效果。 總結 通過以上兩種方式,我們可以輕松地防止文本被選中。這種技術在設計網頁時非常有用,特別是在保護版權等方面。然而,我們也需要權衡一下,因為有時用戶可能需要復制一些重要的信息,而禁止文本被選中可能會妨礙他們的正常使用。
上一篇css網頁取色器
下一篇css設置文本不打斷