这是我参与「第四届青训营」笔记创作活动的的第14天

前言

本篇文章将持续更新一些前端开发的小技巧，如CSS设置文本溢出以省略号显示。

1. CSS技巧

1.1 鼠标样式 cursor

cursor

CSS 属性设置光标的类型，在鼠标指针悬停在元素上时显示相应样式。

当你的鼠标悬停在一个盒子上时，你可能想让他显示一个手的样式，如同<a/>链接一样，那么就可以通过cursor来进行设置。

.mouse-style{
    cursor: pointer;
}

我们也可以自定义当前的指针类型为图像:

cursor: url(one.svg), url(two.svg) 5 5, pointer;

通过url设置指针的图像，可以设置多个url，默认加载第一个，若第一个加载失败，则加载后续url；若全部加载失败，就加载最后预设的指针类型；每个url之后可以跟一对空格间隔的坐标值，用来设置指针的热点 (即自定义图标的实际点击位置)，位置相对于图标的左上角。

比如下面的例子：将鼠标变成一个小闹钟：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 90%;
            height: 500px;
            background-color: antiquewhite;
            margin: auto;
        }

        .cursor-style {
            cursor: url(https://img.php.cn/upload/article/000/000/024/618a2ac4b581f274.png), pointer;
        }
    </style>
</head>

<body>
    <div id="app" class="cursor-style">
    </div>
</body>

</html>

当鼠标悬浮到某个盒子的时候，也可以变成其他的样式，可以参考。MDN文档

1.2 取消表单轮廓和防止拖拽文本域

通常当填写表单内容时，会显示一个轮廓，我们可以通过给该表单设置outline:none，进行消除。

当我们使用textarea标签时，我们按住标签右下角的标志可以改变文本域的大小：

我们可以通过使用resize:none，禁止表单域的拖拽。

1.3 溢出文本以省略号显示

单行文本溢出显示省略号

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 200px;
            height: 200px;
            margin: auto;
            background-color: antiquewhite;
        }

        .el-style {
            white-space: nowrap; /*禁止换行*/
            overflow: hidden; /*溢出隐藏*/
            text-overflow: ellipsis; /*...*/
        }
    </style>
</head>

<body>
    <div id="app" class="el-style">
        今天上午，随着福厦高铁厦门北站最后一组500米长钢轨成功铺设在道床上，我国首条跨海高铁——福厦高铁全线铺轨贯通。
    </div>
</body>

</html>

.el-style为关键代码，注意应该设置容器的宽度否则无法起作用

多行文本溢出显示省略号

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 200px;
            margin: auto;
            background-color: antiquewhite;
        }

        .el-style {
            /*超出两行省略号*/
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            /* 显示几行 */

        }
    </style>
</head>

<body>
    <div id="app" class="el-style">
        今天上午，随着福厦高铁厦门北站最后一组500米长钢轨成功铺设在道床上，我国首条跨海高铁——福厦高铁全线铺轨贯通。
    </div>
</body>

</html>

注意容器的宽度需要设置，还需要设置适宜的高度，否则会出现如下的情况：

参考

MDN

前端开发小技巧 | 青训营笔记

前言

1. CSS技巧

1.1 鼠标样式 cursor

1.2 取消表单轮廓和防止拖拽文本域

1.3 溢出文本以省略号显示

参考