css代码如下:
text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //这儿的数字代表的就是你所需要实现效果的第N行 -webkit-box-orient: vertical;
效果如下图所示:
这里写图片描述
css小知识点集锦:
1.子元素文字始终居中
div{ width:300px; height:300px;border:1px solid red; } p{ height:300px; display:table-cell; verticle-align:middle; }
2.盒子水平、垂直居中
2-1 :css3写法display: flex; justify-content: center; /* horizontal centering */ align-items: center; /* vertical centering */ 2-2 :普通写法 //不支持IE6,IE7 display: table-cell; vertical-align: middle;
3.给定宽度,内部文字,元素平均分布
display: flex;//父盒子 justify-content: space-around/space-between;//父盒子
4.文字显示第N行之后变成…显示
text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //这儿的数字代表的就是你所需要实现效果的第N行 -webkit-box-orient: vertical;
5.flex-grow 属性规定项目将相对于同一容器内其他灵活的项目进行扩展的量。
父元素:display:flex; 子元素:flex-flow: number|initial|inherit;
6.线性渐变
-moz/o/ms/webkit-linear-gradient( [ || ,]? , [, ]* ) eg:background:-moz/o/ms/webkit-linear-gradient(top,#ccc,#000); 线性渐变在ie下的应用: filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/IE<9>/ -ms-filter: “progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)”;/IE8+/
7.animation: ;
animation-fill-mode
none:如果你希望某个关键帧的属性值应用,首先你的关键帧应该处于激活。
forwards:在你的动画完成之后,所有的属性都保留结束时的值。
backwards:动画会应用开始关键帧设置的属性值,即使关键帧还没有激活。
both:forwards和backwards的结合。
注意:animation-play-state:running/paused属性不能简写,要另外单独写
8.现阶段兼容性很差:object-fit:fill/contain/cover/none/scale-down/
object-fit主要适合于替换元素,比如:、、、、、和等。其默认值为fill。object-fill取值的说明如下:
fill:此值为boject-fit的默认值,替换内容的大小被设置为填充元素的内容框,也就是说,元素的内容扩大到完全填充容器的外形尺寸,即使这打破其内在的宽高比。
contain:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为一个包含元素的宽度和高度。也就是说,如果你在替换元素上设置一个明确的高度和宽度,此值将导致内容大小,完全在固定的比例显示,但仍在元素尺寸内显示。
cover:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说,替换元素内容大小保持长宽比,但改变宽度和高度,以便完全覆盖内容元素。
none:替换元素内容不调整大小以适应内部元素的容器,内容完全忽略设置在元素上的任何高度和权重,并且仍在元素尺寸内显示。
scale-down:当内容大小设置了non或contain,将导致具体对象变得更小。
9.针对360浏览器下不能解决outline:none;但会出现虚线边框的情况
解决:在html中增加属性:hidefocus=”true”即可
10.实现图片居中的兼容性又比较好的方法
html:
<ul class="imgWrap clearfix"> <li><span></span><img src="img/HBuilder.png" alt="" /></li> </ul>
css:
<style type="text/css"> .imgWrap li{ height: 219px; float: left; border: solid 1px #666; margin: 10px 10px 0 0; list-style: none; text-align: center; font-size: 0; } .imgWrap span { display: inline-block;/*将行内元素改变为行内块元素显示*/ width: 1px;/*实现IE下可读效果*/ height: ;/*使用元素高度和图片容器高度一样*/ vertical-align: middle;/*垂直对齐*/ } .imgWrap img { vertical-align: middle; } </style>
11.父容器高度固定,文字可能一行,两行或更多行的垂直居中对齐(和图片居中差不多)
html:
<div class="test"><span>这里存放的是文字</span></div>
css:
.test{ width: 300px; height: 300px; background: honeydew; display: table-cell; vertical-align: middle; } .test span{ display: inline-block; vertical-align: middle; }
12.css绘制三角形
width: 0; height: 0; border-bottom: 6px solid #ff3300; border-left: 4px solid transparent; border-right: 4px solid transparent;
13.牛逼的 will-change属性
will-change属性可以提前通知浏览器我们要对元素做什么动画,这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变,渲染的也更快,这样页面可以快速更新,表现的更加流畅。
举个例子,当对于素使用 CSS 3D变形时,元素及其内容可以在合成到页面之前被创建到我们之前说的layer。然而把元素放到layer中是个昂贵的操作,这将会导致变形动画延迟一个课件的瞬间,也就是flicker。
为了避免这种延时,我们可以在发生之前通知浏览器,这样浏览器会有一定的时间去准备这些变化,当发生的时候layer已经准备好了,这样动画酒会很流畅,不会闪屏使用will-change提示浏览器关于即将发生的变形十分简单,添加个CSS属性就行
will-change: transform;也可以告诉浏览器要改变元素的滚动条位置,或者多个要变化的属性,写下属性的名字就行,也可以写多个,逗号隔开
will-change: transform, opacity;
声明了元素即将进行的变化会让浏览器在渲染页面时做更好的决定,这明显比之前说的3D hacks要好。
14.避免图中的长按弹出菜单与选中文本的行为、禁止选中文本
a,img{ -webkit-touch-callout:none; } html,body{ -webkit-user-select:none;user-select:none; }
15.实现鼠标滑过出现块不被限定高度隐藏的方法
给外层限定高度的div加上overflow:visible;
16.实现等比例图片不论始终居中问题;
html结构:
<ul> <li> <a href="#"> <img src="img/car3.jpg" alt="car" /> </a> </li> </ul>
css结构
ul{ width: ; height: 360px; } li{ width: 615px; height: 360px; overflow: hidden; border: 1px solid #dbdbdb; } a{ display: block; width: 615px; height: 760px; line-height: 760px; margin-top: -200px; } img{ width: ; vertical-align: middle; }
17.如何修改chrome记住密码后自动填充表单的黄色背景 ?
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189); /* #FAFFBD; */ background-image: none; color: rgb(0, 0, 0); }
18.让页面里的字体变清晰,变细
-webkit-font-smoothing: antialiased;