//单行省略
.ellipsis{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
//多行省略 局限
.ellipsis-more{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
//div居中
.center-position{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.center-display{
display: flex;
align-items: center; //垂直居中
justify-content: center; //水平居中
}
//css画箭头
.arrow{
width: 12px;
height: 12px;
border-left: 1px solid #D2D2D2;
border-bottom: 1px solid #D2D2D2;
-webkit-transform: translate(0,-50%) rotate(-135deg);
transform: translate(0,-50%) rotate(-135deg);
position: relative;
top: 6px;
}
// flex 布局中，防止图片压缩变形
.div{
display: flex;
img{
flex-shrink: 0;/*防止被压缩导致变形*/
}
}
css省略号、div居中、css箭头常用方法
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 一般情况一下三句即可解决 css一共就三句话： { white-space: nowrap; text-over...
- 超出隐藏，不换行，省略号 overflow:hidden; //超出的文本隐藏 text-overflow:ell...
- 单行省略...一贯写法： width：数值； overflow：hidden； text-overflow:ell...
