字体图标，导入/强制省略号显示/利用定位 hover 案例，鼠标移入显示，离开消失/

最新推荐文章于 2023-12-14 17:58:45 发布

喵帕斯_喵太

最新推荐文章于 2023-12-14 17:58:45 发布

阅读量215

点赞数

分类专栏：前端基础文章标签： css html

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/115064072

版权

前端基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

制作字体图标

自己制作图标或者是美工提供给我们 (我们练习自己制作图标)
1. 阿里巴巴字体图标库
2. icomoon
登录帐号
按照需求，选择的对应风格字体图标库
选择图标库中的对应的小图标
将其添加到 项目中
选择使用方式 font class
点击下载至本地

在css中来使用字体图标

在自己的项目目录中新建文件夹 fonts 用来存放字体图标文件
将字体图标文件引入到 fonts 中
把附带的字体图标样式文件移动到 css文件夹内 css/iconfont.css
修改 css/iconfont.css 中关于引入字体文件的路径

修改为

在这里插入图片描述

在静态页面中引入这个字体图标样式文件

<link rel="stylesheet" href="css/iconfont.css">

然后在标签中使用

<i class="iconfont icon-hot"></i>

过程

@font-face目的告诉浏览器我们要使用自己的字体图标 ,告诉它我们自己取的名字，和对应的图标在哪个位置
.iconfont 通过指定一个 class 来使用我们定义好的字体图标种类，方便复用
.icon-bingjiling-05 这个类代表着对应的图标的模样
最后 ,给 i 标签添加上述两个class 即可使用上字体图标了

单行强制省略号显示

    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 先强制一行内显示文本 */
            white-space: nowrap;
            /*超出部分隐藏*/
            overflow: hidden;
            /*文字用省略号替代超出的部分*/
            text-overflow: ellipsis;
            margin: 40px auto;
        }
    </style>
</head>
<body>
    <div>很长一段话，无法强制换行显示怎么办</div>
</body>
</html>

注意：要使得 <' text-overflow '> 属性生效，块容器必须显式定义 <' overflow '> 为非visible值，同时显式或者隐式的定义 <' width '> 为非auto值， <' white-space '> 为nowrap值。
我们将text-overflow生效必备的3个属性： <' overflow '> , <' width '> 和 <' white-space '> 都直接定义在了内联内容的父级块容器上
clip： 当内联内容溢出块容器时，将溢出部分裁切掉。 ellipsis： 当内联内容溢出块容器时，将溢出部分替换为（…）。
///分割线/
white-space: 取值 normal： 默认处理方式。会将序列的空格合并为一个，内部是否换行由换行规则决定。
pre：原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同 pre 元素效果
nowrap： 与normal值一致，不同的是会强制所有文本在同一行内显示。
pre-wrap： 与pre值一致，不同的是文字超出边界时将自动换行。
pre-line： 与normal值一致，但是会保留文本输入时的换行。

多行强制省略号显示

    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: -webkit-box;
            overflow: hidden;
            white-space: normal !important;(溢出不换行)
            text-overflow: ellipsis;（溢出用省略号显示）
            word-wrap: break-word;(只对那些超出容器宽度的单词进行拆分，而不影响其他正常单词)
            -webkit-line-clamp: 2;（这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。）
            -webkit-box-orient: vertical;(// 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）)
        }
    </style>
</head>

<body>
    <div>很长一段话，无法强制换行显示怎么办啊啊</div>
</body>

</html>

土豆视频案例

移入前
在这里插入图片描述

移入后
在这里插入图片描述
代码示例

    <title>Document</title>
    <style>
        .box {
            width: 448px;
            height: 252px;
            margin: 30px auto;
            position: relative;
        }

        .tu {
            width: 100%;
            height: 100%;
            background-image: url(images/1.jpg);
        }

        .tubiao {
            display: none;
            background: url(images/1.png) no-repeat center rgba(0, 0, 0, .4);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .box:hover .tubiao {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="tu"></div>
        <div class="tubiao"></div>
    </div>
</body>

</html>

注意：background-size中的cover与contain都是将图片以相同的宽高比缩放以适应容易的宽高，不同的是cover会缩放至图片能够铺满整个容易，可能会有部分图片区域被裁剪，而contain则是图片会缩放至整个图片都能显示完全，但是容易可能会有留白。
如果使用背景图片的话 background: url(./images/1.jpg) no-repeat center / cover;可铺满整个大小。

喵帕斯_喵太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
字体图标，导入/强制省略号显示/利用定位 hover 案例，鼠标移入显示，离开消失/

制作字体图标自己制作图标或者是美工提供给我们 (我们练习自己制作图标)阿里巴巴字体图标库icomoon登录帐号按照需求，选择的对应风格字体图标库选择图标库中的对应的小图标将其添加到项目中选择使用方式 font class点击下载至本地在css中来使用字体图标在自己的项目目录中新建文件夹 fonts 用来存放字体图标文件将字体图标文件引入到 fonts 中把附带的字体图标样式文件移动到 css文件夹内 css/iconfont.css修..
复制链接

扫一扫