css 防止文本选择-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > 学无止境 > web前端 > css >

vue react javascript angular css html

css 防止文本选择

作者：迹忆客最近更新：2023/04/27 浏览次数：

在 css 中，我们可以使用许多属性来对元素进行一些修改。在这里，修改这个词指的是元素的样式，或者给予或移除元素的各种控制。

使用 css user-select 属性来防止文本选择

在设计网页时，我们通常会添加一些文本，可以是段落，表格中的数据，表格中的标签等。当该文本出现在网页上时，查看网页的人可以选择文本并复制它以进行各种活动 .

例如，访问网页的人可以从该网页中选择一些文本并复制它们以供他使用；然而，一些网页所有者并不喜欢这样。所以为了防止这种情况，我们可以阻止文本选择。

css 为我们提供了一个属性来防止文本选择，即 user-select 属性。使用此属性，我们可以阻止用户选择任何文本。

但我们都使用不同种类的网络浏览器。如果我们使用不同类型的网络浏览器，我们应该改变我们使用这个属性的方式。

下面我们展示了如何在各种 web 浏览器中使用 user-select 属性。

语法：

-webkit-user-select: none;    /*standard method. can be used in safari*/
-moz-user-select: none;       /*standard method. can be used in firefox*/
-ms-user-select: none;        /*standard method. can be used in internet explorer or edge*/
user-select: none;            /*standard method. can be used in google chrome*/

第一种方法适用于 ios 和 mac 用户，因为他们的默认浏览器是 safari。 firefox 用户可以使用第二种方法，使用 internet explorer 或 edge 的用户可以使用第三种方法。

那些使用谷歌浏览器作为浏览器的人可以使用第四种方法。

在上面的语法中，我们可以为 user-select 属性的值分配几个选项。

选项	说明
auto	auto 值是用户选择属性使用的默认值。如果浏览器允许，我们可以选择文本。
none	如果我们使用这个选项，用户将无法选择任何文本。换句话说，我们正在阻止文本选择。
text	我们可以使用它来让用户选择文本。
all	通过这个选项，我们可以通过单击而不是双击来选择文本。

在本文中，我们将讨论 user-select 属性的 none 选项，以防止用户选择文本。

添加 user-select: none 到文本

为了容易理解这个概念，让我们在网页上添加一个简单的文本，如下所示。

<div>
    <p class="unselect">this is a textp>
div>

为文本添加样式

让我们向该文本添加一些 css 样式以获得更好的视图。

.unselect{
    font-family: 'segoe ui', tahoma, geneva, verdana, sans-serif;
    font-size: 30px;
    color: navy;
    padding-left: 10px;
}

在这里，我们为文本指定了字体、字体大小和填充。它应该看起来像这样，我们可以选择文本。

如您所见，我们可以像往常一样选择我们的文本。

添加具有 none 值的 user-select 属性

添加样式后，我们可以设置 user-select 属性来防止文本选择。我们使用 none 作为属性的值，如下所示。

.unselect{
    user-select: none;
    font-family: 'segoe ui', tahoma, geneva, verdana, sans-serif;
    font-size: 30px;
    color: navy;
    padding-left: 10px;
}

<div>
    <p class="unselect">this is a textp>
div>

如您所见，我们的文本现在不可选择。

但以上代码仅在使用 google chrome 网络浏览器时有效。我们可以修改上面的代码以在其他网络浏览器中使用。

.unselect{
    user-select: none; /*standard method. can use in google chrome*/
    -webkit-user-select: none; /*standard method. can use in safari*/
    -moz-user-select: none; /*standard method. can use in firefox*/
    -ms-user-select: none; /*standard method. can use in internet explorer or edge*/
    font-family: 'segoe ui', tahoma, geneva, verdana, sans-serif;
    font-size: 30px;
    color: navy;
    padding-left: 10px;
}

<div>
    <p class="unselect">this is a textp>
div>

将 user-select 属性添加到表中的文本

现在，让我们创建一个表来尝试这个属性。我们将构建的表有两列：名字和姓氏，以及包含相关数据的两行。

html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
        <title>html prevent text selectiontitle>
    head>
    <body>
        <table>
            <tr>
                <th>first nameth>
                <th>last nameth>
            tr>
            <tr>
                <td>jamietd>
                <td>andersontd>
            tr>
        table>
    body>
html>

如您所见，我们已经创建了表格，但它没有样式。让我们使用 css 为我们的表格设计样式。

table {
    background-color: rgb(243, 150, 253);
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: auto;
}
td, th {
    border: 1px solid #000000;
    text-align: left;
    padding: 8px;
}

html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
        <title>html prevent text selectiontitle>
    head>
    <body>
        <table>
            <tr>
                <th>first nameth>
                <th>last nameth>
            tr>
            <tr>
                <td>jamietd>
                <td>andersontd>
            tr>
        table>
    body>
html>

如结果所示，我们已经设计了表格的样式。您还可以看到我们可以选择表格内的文本，所以让我们尝试禁用它。

与前面的示例一样，我们可以将 user-select 属性添加到表中。您可以将其添加到整个表格或仅用于选定的单元格。

我们将仅为表头添加用户选择属性。我们可以将下面的代码块添加到相同的 css 代码中。

th{
    user-select: none; /*standard method. can use in google chrome*/
    -webkit-user-select: none; /*standard method. can use in safari*/
    -moz-user-select: none; /*standard method. can use in firefox*/
    -ms-user-select: none; /*standard method. can use in internet explorer or edge*/
}

html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
        <title>html prevent text selectiontitle>
    head>
    <body>
        <table>
            <tr>
                <th>first nameth>
                <th>last nameth>
            tr>
            <tr>
                <td>jamietd>
                <td>andersontd>
            tr>
        table>
    body>
html>

如果我们运行代码，我们将获得如下所示的结果。

如您所见，无法选择标题中的文本。

总结

本文讨论了防止文本选择以及 css 的 user-select 属性如何帮助实现它。正如我们所了解的，在各种 web 浏览器中有不同的方式使用此属性。

我们举了两个例子来阐明阻止文本选择的基本内容。还有其他方法，但 css 提供了一种简单的方法来完成此操作。

上一篇：css 使用浮动居中元素

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

覆盖 bootstrap css

发布时间：2023/04/28 浏览次数：133 分类：css

本文介绍的是著名的 css ui 框架 bootstrap。我们将讨论使用自定义样式覆盖 bootstrap css 的过程。

使用 css 制作带圆角的 html 表格

发布时间：2023/04/28 浏览次数：245 分类：css

这个简短的文章是关于在 html 页面上制作圆角表格的 css 样式。使用 css 制作带圆角的 html 表格使图像、表格或 div 段的角变圆的属性是 border-radius。

css 设置轮廓 outline 的半径

发布时间：2023/04/28 浏览次数：140 分类：css

在本文中，用户将学习如何为 outline 属性设置圆角，与 border-radius 属性相同。在这里，我们已经解释了将圆角应用于轮廓属性的不同方法。

发布时间：2023/04/28 浏览次数：265 分类：css

在本文中，用户将学习仅使用 css 将

使用 css 居中内联块

发布时间：2023/04/28 浏览次数：118 分类：css

在本文中，我们将创建多个 html 元素并将其显示设置为 inline-block。之后，我们将学习使用 display: inline-block 将所有元素居中。

使用 css 添加透明边框

发布时间：2023/04/28 浏览次数：525 分类：css

在本文中，我们将讨论在 html 中的图像、按钮或任何其他对象周围创建透明边框。透明边框是图像或对象周围的边框，可改善用户体验。

使用 css 向上移动文本

发布时间：2023/04/28 浏览次数：704 分类：css

有时，在开发网页时，我们将文本放在底部或页脚中，因此我们可能需要在文本下方留一个空格并将文本上移。我们将学习如何使用 css 从网页底部向上移动文本。

发布时间：2023/04/28 浏览次数：233 分类：css

本文提供了使用 css、javascript 和 jquery 使文本闪烁的详细说明。

css 使用浮动居中元素

发布时间：2023/04/28 浏览次数：217 分类：css

本文主要讨论如何使用css实现浮动元素居中。 float 属性通常设置为左值或右值，而不是中心值。本文将讨论浮动元素如何居中的几个技巧

css 防止文本选择-ag捕鱼王app官网