CSS中的文字不可復制是利用CSS的user-select屬性來實現的。user-select屬性可以控制用戶是否可以選擇其中的文本內容,常用的屬性為none。
body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
在上述代碼中,我們對body元素設置了user-select屬性為none,這就意味著用戶在頁面中無法對body元素內的文本進行復制和選擇。同樣,也可以對任意一個元素設置這個屬性,以禁止用戶復制其中的文本內容。
需要注意的是,并非所有瀏覽器都支持user-select屬性,如需兼容性更好的寫法可使用以下代碼:
/* 禁止文本選擇 */ -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
除了禁止用戶復制文本外,也有時候需要允許用戶選擇其中的文本內容,可以將user-select屬性設置為auto,允許用戶選擇其中的文本,并進行復制操作。
/*允許文本選擇*/ -webkit-touch-callout: default; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto;
總之,CSS中控制文本是否可復制,可選中只需要使用user-select屬性即可,按照需要設置為none或auto即可。
上一篇css中文字圖片