【CSS】常见

一. 溢出隐藏

1.1 单行文本溢出

.content{max-width:200px; 	/* 定义容器最大宽度 */overflow:hidden; 	/* 隐藏溢出的内容 */text-overflow:ellipsis;	/* 溢出部分...表示 */white-space: nowrap;	/* 确保文本在一行内显示 */
}

问题:display:flex 和 ellipsis 冲突
解决:把flex布局和ellipsis分别放在两个容器内

<div class="flex-content"><div class="overflow-ellipsis"><div>要展示的内容文本/数组(遍历此div)</div></div>
</div>.flex-content{display:flex;justify-content: space-between;align-items: center;
}
.overflow-ellipsis{max-width: 600px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}

1.2 多行文本溢出

.content{/*! autoprefixer: off */-webkit-box-orient: vertical;	/* 文本垂直排列 *//* autoprefixer: on */-webkit-line-clamp: 2;	/* 指定显示行数 */	display: -webkit-box;	/* 兼容性 盒模型 */overflow: hidden;	/* 多余部分隐藏 */
}

① /*! autoprefixer: off /和/ autoprefixer: on *是为了解决 -webkit-box-orient: vertical丢失问题
② display: -webkit-box;与overflow: hidden;一起使用来创建多行文本溢出的省略号

1.3 y轴滚动条溢出隐藏,可查看所有内容但不显示滚动条

.content{min-height: calc(73vh);		max-height: calc(80vh); /* 超过这个高度的内容会被隐藏 *//* 隐藏对应浏览器滚动条:firefox 及IE 10+ */scrollbar-width: none;-ms-overflow-style: none;overflow-y: auto; /* 自由滑动查看全部内容 */  
}.content::-webkit-scrollbar {/* Chrome Safari */display: none;	
}

二. 居中对齐

2.1 水平居中

2.1.1 width 固定,height不设
<div class="content">水平居中
</div>.content{width: 1200px; /* 百分比宽度也行,例 50% */margin: 0 auto;background-color: aqua; /*为了显示该盒子而设置的背景颜色*/
}

在这里插入图片描述

2.1.2 width不固定,height不设
<div class="content">水平居中
</div>.content{text-align:center;background-color: aqua; /*为了显示该盒子而设置的背景颜色*/
}

三. 设置图片

1.1 template中设置

<img :src="require('@/assets/award/activity-1.png')" />

1.2 style中设置

background-image: url("~@/assets/award/activity-1.png");

1.3 背景图渐变(一半白一半图)

1.1.1 单个渲染
  1. css
.backImg{background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 50%),url(~@/assets/award/activity-1.png);
}
  1. 渲染结果
    在这里插入图片描述
1.1.2 动态渲染
  1. 实现
 <div v-for="(item, index) in  AwardYearList " :key="index" :style="{background: `linear-gradient(to left, rgba(255, 255, 255, 0), #fff 40%),url(${require('@/assets/award/' + item.img)})`}">
</div>
  1. 数据
    在这里插入图片描述 3. 渲染结果
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/444097.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TensorFlow2实战-系列教程13:Resnet实战1

&#x1f9e1;&#x1f49b;&#x1f49a;TensorFlow2实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Jupyter Notebook中进行 本篇文章配套的代码资源已经上传 Resnet实战1 Resnet实战2 Resnet实战3 1、残差连接 深度学习中出现了随着网络的堆叠…

React Router 完美教程(下)

我们书接上回&#xff0c;继续我们的React Router 路由之路&#xff1a; 我们到目前为止都没有用到 state、useEffect、redux等状态管理器。但也达到了我们的设计目的。 注意&#xff0c;action 返回的结果 可以在组件中使用 useActionData() 来获取。就像 useLoaderData() 的使…

天软因子数据库新成员——天软指数基金因子库

新闻资讯 News information UPDATE 天软指数基金因子库 天软始终致力于构建完善而丰富的因子库服务体系&#xff0c;陆续推出了股票因子、基金因子、多因子系列等众多因子数据及评价数据。 2024年天软将继续推进各品种因子的深入研究&#xff0c;开年之际天软推出指数基金因子库…

基于EdgeWorkers的边缘应用如何进行单元测试?

随着各行各业数字化转型的持续深入&#xff0c;越来越多企业开始选择将一些应用程序放在距离最终用户更近的边缘位置来运行&#xff0c;借此降低延迟&#xff0c;提高应用程序响应速度&#xff0c;打造更出色的用户体验。 相比传统集中部署和运行的方式&#xff0c;这种边缘应…

769933-15-5,Biotin aniline,可以合成多种有机化合物和聚合物

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;769933-15-5&#xff0c;Biotin aniline&#xff0c;生物素苯胺&#xff0c;生物素-苯胺 一、基本信息 产品简介&#xff1a;Biotin Aniline&#xff0c;一种具有重要生物学功能的化合物&#xff0c;不仅参与了维生…

Fiddler修改https请求与响应 bug修复变灰了选不了等 Fiddle对夜神模拟器抓包设置

不要修改别人的东西&#xff0c;不要修改别人的东西&#xff0c;不要修改别人的东西 只用于自己的网站&#xff0c;自己安全调试。 fiddler修改https请求 1、打到要改的请求 2、替换请求内容 3、开启捕获。操作产生请求。 4、fiddler里查看请求或响应数据 &#xff0c;确认成…

python给word插入脚注

1.需求 最近因为工作需要&#xff0c;需要给大量文本的脚注插入内容&#xff0c;我就写了个小程序。 2.实现 下面程序是我已经给所有脚注插入了两次文本“幸福”&#xff0c;给脚注2到4再插入文本“幸福” from win32com import clientdef add_text_to_specific_footnotes(…

服务器系统安装时无法进入引导界面处理【笔记】

服务器系统安装时无法进入安装界面处理&#xff1b; 服务器系统安装时无法进入安装界面处理&#xff1b; 1、按“e”键进入编辑模式。 2、在出现的编辑项里&#xff0c;找到quiet aplash后空格加入nomodeset&#xff1b; 3、然后按CTRLX或F10引导系统&#xff0c;启动之后…

地毯填补问题

地毯填补问题 题目描述 相传在一个古老的阿拉伯国家里&#xff0c;有一座宫殿。宫殿里有个四四方方的格子迷宫&#xff0c;国王选择驸马的方法非常特殊&#xff0c;也非常简单&#xff1a;公主就站在其中一个方格子上&#xff0c;只要谁能用地毯将除公主站立的地方外的所有地…

结构体的学习

结构体与共用体&#xff0c;枚举 1.数据类型复习&#xff1a; 2结构体. eg&#xff1b;统计全校同学信息 需要记录的点--- 姓名&#xff0c;班级&#xff0c;性别&#xff0c;成绩&#xff0c;年龄 统计名字&#xff1a;char s[ ] [ 100 ] { "Tmo" } …

41、WEB攻防——通用漏洞XMLXXE无回显DTD实体伪协议代码审计

文章目录 XXE原理&探针&利用XXE读取文件XXE带外测试XXE实体引用XXE挖掘XXE修复 参考资料&#xff1a;CTF XXE XXE原理&探针&利用 XXE用到的重点知识是XML&#xff0c;XML被设计为传输和存储数据&#xff0c;XML文档结构包括XML声明、DTD文档类型定义&#xf…

【MySQL】学习并使用聚合函数和DQL进行分组查询

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-t8K8tl6eNwqdFmcD {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…