css禁用選中文本
Introduction:
介紹:
Texts are the most fundamental elements of any websites or web pages, they form the basis of the web pages or websites because if you don’t write something that you will not be able to present anything. Therefore, it should not be unknown that dealing with texts is something that is done very frequently during the development of websites or web pages. There are numerous properties related to texts for editing as well as styling which further helps in making our web pages or websites responsive and user-interactive.
文本是任何網站或網頁的最基本元素,它們構成了網頁或網站的基礎,因為如果您不寫東西,您將無法展示任何內容。 因此,在網站或網頁的開發過程中經常要處理文本是不言而喻的。 有許多與文本相關的屬性可用于編輯和樣式化,這進一步有助于使我們的網頁或網站具有響應性和用戶交互性。
Use of selectable texts:
可選文本的使用:
Sometimes we want our written text to do something when the user selects it. Either we want it to take the user to some other page or indicate something while the text is being selected. Texts are used as links that are generally used to take users from one page to another. Therefore selectable texts also become necessary for such kind of situations, if your text is not selectable then don’t expect it to do anything while it is being selected. But what if we want to disable text selection? Well, that is the sole purpose of this article, to let you know how to disable text selection highlighting with the help of CSS. There are times when you do not want your text to do anything, so might need to implement this method there. So keep on reading and you will get your answer.
有時,我們希望我們的書面文字在用戶選擇時有所作為。 我們要么希望它帶用戶到其他頁面,要么在選擇文本時指出一些內容。 文本用作鏈接,通常用于將用戶從一頁轉到另一頁。 因此,在這種情況下,可選文本也變得很有必要,如果無法選擇您的文本,那么不要期望它在被選擇時會做任何事情。 但是,如果我們要禁用文本選擇怎么辦? 好吧,這是本文的唯一目的,是讓您知道如何在CSS的幫助下禁用文本選擇突出顯示。 有時您不希望文本執行任何操作,因此可能需要在此處實現此方法。 因此,繼續閱讀,您會得到答案。
Solution:
解:
To achieve this task is not very tough beside you might be aware of the property by which we are going to make this thing happen. Without much further adieu, let us have a look at the solution.
要完成此任務不是很困難,除了您可能已經意識到我們將要實現此目標的屬性。 無需過多討論,讓我們看看解決方案。
To disable text selection highlighting using CSS property user-select is used and set its value to none. See! Not tough right? All you gotta do is make use of the user-select property and set it to none and there you got it! Your text selection is now disabled. So go ahead and try it out yourself and a very basic example has been mentioned below for your reference, in case you get stuck anywhere.
要使用CSS屬性禁用文本選擇突出顯示,使用user-select并將其值設置為none 。 看到! 不難對嗎? 您要做的就是利用user-select屬性并將其設置為none,就可以了! 您的文本選擇現已禁用。 因此,請繼續嘗試一下,下面提到了一個非常基本的示例供您參考,以防萬一。
Syntax:
句法:
Element{
user-select:none;
}
Example:
例:
<!DOCTYPE html>
<html>
<head>
<style>
.disable-text {
user-select: none;
}
</style>
</head>
<body>
<div class="disable-text">
<h1>Unselectable Text</h1>
</div>
<div>
<h1>Selectable Text</h1></div>
</body>
</html>
Output
輸出量

In the above example, the text "unselectable text" cannot be selected by the user whereas the text "selectable text" is selected by the user.
在以上示例中,文本“無法選擇的文本”不能由用戶選擇,而文本“可選擇的文本”則由用戶選擇。
Note:
注意:
But we have to add a browser-specific prefix before the user-select option for Safari, Firefox and Internet Explorer or edge. Chrome and Opera support non-prefixed versions.
但是我們必須在Safari,Firefox和Internet Explorer或edge的用戶選擇選項之前添加特定于瀏覽器的前綴。 Chrome和Opera支持非前綴版本。
Here is the syntax supported by different browsers,
這是不同瀏覽器支持的語法,
user-select: none; /* Chrome and Opera */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
翻譯自: https://www.includehelp.com/code-snippets/disable-text-selection-highlighting-using-css.aspx
css禁用選中文本