超出指定行数显示…
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});