Css 小技巧

超出指定行数显示…

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

--IOS--
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-align: justify;
text-justify: inter-ideograph;

单行超出显示…

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

文字渐变

background-image: linear-gradient(#DEEEFE, #1A51BB);
-webkit-background-clip: text;
color: transparent;

图标跟文字对齐

vertical-align: middle;

三角形

width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: pink;

圆角三角形

width: 0;
border: 30rpx solid blue;
border-right: 30rpx solid transparent;
border-top: 30rpx solid transparent;
border-bottom-left-radius: 10rpx;
transform: rotate(180deg);
position: absolute;
top: 0;
right: 0;

数字换行

word-break: break-all;
word-wrap: break-word;

根据宽度布局

display: flex;
flex-wrap: wrap;

图片文字，文字超宽度换行

overflow-wrap: break-word;
min-width: 0;

深度选择器

 >>>    /deep/   ::deep

div 居中

父盒子

position: relative;

子盒子

position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);

图片自适应

width:100%;
height:100%;
background-size: 100% 100%;
background-position: center center;
background-image:url(${imgUrl});