1.单行超出文本…
max-width: 100px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
2.多行文本超出…
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
white-space: normal;
3.箭头
border-left: 5px solid #fff;
border-bottom: 5px solid #fff;
transform: rotate(45deg);
height: 30px;
width: 30px;
4.三角形
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
5.禁止选中文字
user-select:none;
6.图片禁止长按
pointer-events: none;
user-select: none;
7.不要滚动条
::-webkit-scrollbar {
display: none;
}
8.文字换行
word-wrap:break-word;
white-space:normal;
word-break:break-all;
9.去掉点击态(ios设备上表现为一个半透膜的灰色背景)
-webkit-tap-highlight-color: rgba(0,0,0,0);
10.移动端1px border
.border-top {
position: relative;
}
.border-top::before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 0;
display: block;
height: 1px;
border-top: 1px solid #e6e6e6;
color: #e6e6e6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.333);
transform: scaleY(0.333);
}
11.H5引入字体包
@font-face {
font-family: 'family-name';
src: url('ziti.ttf')
}
.class1 {
font-family: 'family-name';
}
12.小程序引入字体包
ttf转base64
https://blog.csdn.net/zhiyan1990/article/details/120366549
https://transfonter.org/
@font-face {
font-family: "family-name";
src: url('base64字符串');
}
.class1 {
font-family: family-name;
}
13.小程序scroll-view横向滚动
https://blog.csdn.net/maxwheel/article/details/85642183
scroll-view的内层view元素需要:
display: inline-block
scroll-view的外层元素需要:
white-space: nowrap