常用的css

105 阅读1分钟

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