如何使用 CSS 禁用文字選擇突出顯示？-css教學-PHP中文網

如何使用 CSS 禁用文字選擇突出顯示？

WBOY

發布： 2023-09-19 11:21:09

轉載

995 人瀏覽過

如何使用 CSS 禁用文本选择突出显示？

在 CSS 中，我們可以使用 select 屬性來停用文字選擇突出顯示。但要停用該文本，我們必須在 CSS 中應用一些屬性，以便無法選擇或突出顯示該文本。讓我們舉個例子來了解突出顯示與非突出顯示文字之間的差異。

Tutorialspoint - 文字突出顯示。
Tutorialspoint - 文字未反白。

使用的屬性

範例中使用了以下屬性 -

user-select - 此屬性定義使用者是否選擇文字元素。 Chrome 和 Opera 瀏覽器支援此屬性。
moz-user-select - 此屬性與 user-select 屬性的作用相同，且 Mozilla Firefox 瀏覽器支援此屬性。
webkit-text-select - IOS safari 瀏覽器支援此屬性，並與使用者選擇屬性相同。
webkit-user-select - 此屬性與 user-select 屬性的工作方式相同。 Safari 瀏覽器支援此屬性。

範例 1

在這個範例中，我們先設定文字的主標題，使用h1元素和p元素來設定文字段落。要停用段落上的文字選擇突出顯示，它將使用內部 CSS 來啟動 p 元素的類，即「.no-highlight」。該類別在名為 user-select 的瀏覽器屬性中將值設為 none（Chrome 和 Opera 瀏覽器停用文字選擇）。

<!DOCTYPE html>
<html>
<title>Tutorialspoint</title>
<head>
   <style>
      .not-active{
         user-select: none; // chrome and Opera
      }
   </style>
</head>
<body>
   <center>
      <h1>The Story of Helen Keller</h1>
   </center>
   <p class="not-active">Helen Keller (born June 27, 1880, in Tuscumbia, Alabama, U.S.—died June 1, 1968, in Westport, Connecticut) was a blind and deaf American author and schoolteacher. Keller lost her eyes and hearing at the age of 19 months due to illness, and her speech development followed suit. Anne Sullivan (1866-1936), who taught her the names of things by pressing the manual alphabet into her palm, started instructing her five years later. Keller eventually learned to read and write in Braille. She was the author of several works, including The Story of My Life. (1902). William Gibson's play The Miracle Worker depicted her upbringing. (1959; film, 1962).</p>
   <p>
      <b>@tutorialspoint<b>
   </p>
</body>
</html>

登入後複製

範例 2

在此範例中，我們將使用 p 元素建立兩個段落來顯示啟用和停用文字選擇的差異。第一段是文字的簡單表示，這意味著文字已啟用，但在第二段中它設定了名為 “.no-highlight” 的類別。然後使用內部 CSS 取得此引用，並透過設定不同瀏覽器屬性的樣式來停用文字選擇。

<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
   <style>
      .no-highlight{
         user-select: none; // chrome and Opera
         -moz-user-select: none; // Firefox
         -webkit-text-select: none; // IOS Safari
         -webkit-user-select: none; // Safari
      }
   </style>
</head>
<body>
   <h1>Disable the text selection highlighting using CSS</h1>
   <p>The text can be highlighted</p>
   <p class="no-highlight">The text cannot be highlighted</p>
</body>
</html>

登入後複製