CSS是網頁設計中不可或缺的一部分,它被用來設置網頁中各種各樣的樣式。其中一個有意思的樣式是文本不能被選中。以下是一些代碼示例展示如何禁止文本被選中。
/* CSS樣式表 */ .unselectable{ -moz-user-select: none; /* 火狐瀏覽器 */ -webkit-user-select: none; /* 谷歌瀏覽器 */ -ms-user-select: none; /* IE10+ */ user-select: none; cursor: default; }
上面的代碼使用了一些CSS屬性,其中-webkit-user-select、-moz-user-select和-ms-user-select屬性可以設置允許或者禁止用戶選擇文本。其中,user-select屬性是CSS3新增的屬性,允許開發者選擇允許、禁止用戶選中文本或者強制用戶選中文本。可以在兼容的瀏覽器中,使用這種屬性的簡寫形式"user-select:none"來禁止選擇文本。
此外,如果我們不想讓用戶感知到文本是不能被選中的,可以使用以下代碼:
/* CSS樣式表 */ .unselectable{ -webkit-touch-callout: none; /* iOS */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently */ }
代碼中使用了一些瀏覽器前綴,這是為了兼容各種瀏覽器。-webkit-touch-callout屬性被用來禁用長按鏈接時打開菜單。
總之,CSS使我們更加靈活地設計網頁,使網頁具有更好的用戶體驗。禁止用戶選擇文本是其中的一個有趣的特性,它可以改善網頁的交互體驗,并使網站看起來更加專業和高質量。
上一篇css文本上下平行線
下一篇css文本上凸