css禁用選中文本_使用CSS禁用文本選擇突出顯示

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

輸出量

Disable text selection highlighting using CSS | Exammple

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禁用選中文本

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/542073.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/542073.shtml
英文地址,請注明出處:http://en.pswp.cn/news/542073.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

CDN加速實現—varnish

CDN介紹&#xff1a; 1 . 對cdn的理解&#xff1a; CDN的全稱是&#xff08;Content Delivery Network&#xff09;&#xff0c;即內容分發網絡&#xff1b;加速器&#xff0c;反向代理緩存。CDN系統能夠實時的根據網絡流量和各節點的連接&#xff0c;負載狀況以及到用戶的舉例…

3dmax如何拆分模型_3dmax制作裝飾柜1

大家好&#xff0c;今天我來為大家講解一下如何利用3dmax制作裝飾柜。我們需要制作裝飾柜模型&#xff0c;當我們為它添加一個材質后&#xff0c;它就是這樣的效果。單擊創建&#xff0c;選擇圖形&#xff0c;對象為樣條線&#xff0c;選擇矩形在場景中進行創建。單擊修改&…

TODO:macOS上ThinkPHP5和Semantic-UI集成

TODO&#xff1a;macOS上ThinkPHP5和Semantic-UI集成1. 全局安裝 (on OSX via homebrew)Composer 是 homebrew-php 項目的一部分2. 把Xcode升級到8.1后繼續安裝Composer3. 使用composer創建TP5項目MWL-Dispatchcomposer create-project topthink/think MWL-Dispatch4. 配置apac…

np.expm1_JavaScript中帶有示例的Math.expm1()方法

np.expm1JavaScript | Math.expm1()方法 (JavaScript | Math.expm1() Method) Math operations in JavaScript are handled using functions of math library in JavaScript. In this tutorial on Math.expm1() method, we will learn about the expm1() method and its workin…

距離傳感器控制燈泡代碼_生迪全彩智能 LED 燈泡體驗評測

市面上大多數智能燈具無外乎智能控制&#xff0c;冷暖標準區間的簡單調光&#xff0c;僅僅滿足我們日常照明之外&#xff0c;似乎用處不多。如果有一款能在自己房間制造多彩氛圍的燈泡就好了。這次有幸體驗到了華為智能家居生態鏈產品生迪全彩智能 LED 燈泡&#xff0c;才發現彩…

mysql啟動與關閉(手動與自動)

手動管理mysql的啟動與關閉 [rootmysql ~]# service mysql start --手動啟動mysqlStarting MySQL. SUCCESS![rootmysql ~]# service mysql stop --手動關閉mysql Shutting down MySQL.. SUCCESS! [rootmysql ~]# mysqld --verbose --help --查看MySQL的默認參數的具體值 如果每…

JavaScript中帶有示例的Math.round()方法

JavaScript | Math.round()方法 (JavaScript | Math.round() Method) Math.round() is a function in math library of JavaScript that is used to round the given number floating-point number to the nearest integer value. Math.round()是JavaScript數學庫中的函數&…

內部導線拉力測試_珠海后環回收試驗機現金支付拉力試驗機回收和諧溫馨的環境...

珠海后環回收試驗機現金支付拉力試驗機回收和諧溫馨的環境深圳富興二手設備回收&#xff0c;拉力試驗機回收&#xff0c;恒溫恒濕箱回收&#xff0c;恒溫恒濕試驗箱回收&#xff0c;恒溫恒濕培養箱回收&#xff0c;高低溫試驗箱回收&#xff0c;高低溫沖擊試驗機回收&#xff0…

lvs負載均衡—ldirectord(DR模式的健康檢查)

作用&#xff1a; 健康檢查對企業而言也是由為重要&#xff0c;在生活中&#xff0c;有時候訪問網頁訪問不到&#xff0c;就會跳出來一些圖形告訴你訪問失敗&#xff0c;這就是健康檢查的作用&#xff0c;當服務器都掛掉的時候&#xff0c;告訴你暫時訪問不了。 ldirectord是后…

Reactor by Example--轉

原文地址&#xff1a;https://www.infoq.com/articles/reactor-by-example Key takeaways Reactor is a reactive streams library targeting Java 8 and providing an Rx-conforming APIIt uses the same approach and philosophy as RxJava despite some API differencesIt i…

springboot項目后臺運行關閉_springboot項目在服務器上部署過程(新手教程)

環境&#xff1a;服務器系統&#xff1a;ubuntu16jdkmysql工具 xshell6下載地址&#xff1a;https://www.netsarang.com/download/down_form.html?code622&downloadType0&licenseType1xftp6下載地址&#xff1a;https://www.netsarang.com/download/down_form.html?c…

如何在React Native中使用文本輸入組件?

You know, an app becomes more authentic and professional when there is the interaction between the app and the user. 您知道&#xff0c;當應用程序與用戶之間存在交互時&#xff0c;該應用程序將變得更加真實和專業。 The text input component in react-native brin…

lvs負載均衡—NAT模式

NAT模式原理圖 Virtual Server via NAT &#xff1a; 用地址翻譯實現虛擬服務器,地址轉換器有能被外界訪問到的合法IP地址,它修改來自專有網絡的流出包的地址,外界看起來包是來自地址轉換器本身,當外界包送到轉換器時,它能判斷出應該將包送到內部網的哪個節點。 優點是節省IP …

Django1.9開發博客06- 模板繼承

模板繼承就是網站的多個頁面可以共享同一個頁面布局或者是頁面的某幾個部分的內容。通過這種方式你就需要在每個頁面復制粘貼同樣的代碼了。 如果你想改變頁面某個公共部分&#xff0c;你不需要每個頁面的去修改&#xff0c;只需要修改一個模板就行了&#xff0c;這樣最大化復用…

樂高機器人亮劍_2500名選手大比拼 全球機器人廣州從化“亮劍”

導讀&#xff1a;國際機器人從化總動員學生自己編程、拼裝的機器人既能像相撲手一樣摔跤&#xff0c;又能像蜘蛛俠一樣爬上爬下。還有智能垃圾處理系統&#xff0c;瞄準城市垃圾分類下的“痛點”。在2019RoboRAVE國際教育機器人大會全球總決賽的現場&#xff0c;只有想不到&…

python 編碼問題_Python電源挑戰| 競爭編碼問題

python 編碼問題Question: 題&#xff1a; A power function is that positive number that can be expressed as x^x i.e x raises to the power of x, where x is any positive number. You will be given an integer array A and you need to print if the elements of arr…

lvs負載均衡—高可用集群(keepalived)

基本概念&#xff1a; 什么是Keepalived呢&#xff0c;keepalived觀其名可知&#xff0c;保持存活&#xff0c;在網絡里面就是保持在線了&#xff0c;也就是所謂的高可用或熱備&#xff0c;用來防止單點故障(單點故障是指一旦某一點出現故障就會導致整個系統架構的不可用)的發…

定期定量采購_企業常見的六種采購策略

注冊職業采購經理CPPM考試網?www.apscppm.com對不起&#xff0c;我是采購合同生效的條件是什么&#xff1f;怎樣制定談判方案&#xff1f;如何在采購時讓供應商聽你的指揮&#xff01;沒做預算不能采購&#xff0c;應該作為企業采購管理的基本原則。編制現金預算就是要解決收入…

stringreader_Java StringReader markSupported()方法與示例

stringreaderStringReader類markSupported()方法 (StringReader Class markSupported() method) markSupported() method is available in java.io package. markSupported()方法在java.io包中可用。 markSupported() method is used to check whether this StringReader strea…

pacemaker+corosync實現集群管理

前言: 高可用集群&#xff0c;是指以減少服務中斷&#xff08;如因服務器宕機等引起的服務中斷&#xff09;時間為目的的服務器集群技術。簡單的說&#xff0c;集群就是一組計算機&#xff0c;它們作為一個整體向用戶提供一組網絡資源。這些單個的計算機系統就是集群的節點。 …