前端用到的小技巧

1. 文本超出一行显示省略号

div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2. 文本超出多行显示省略号

div {
  display: -webkit-box;
  -webkit-line-clamp:  2;  // 行数
  -webkit-box-orient: vertical;
  overflow: hidden;
}

3. iOS手机容器滚动条滑动不顺畅

div {
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

4.修改滚动条样式

//隐藏
// 火狐浏览器
div {
    scrollbar-width: none;
}
// 谷歌浏览器webkit
div::-webkit-scrollbar {
    display: none;
}  

::-webkit-scrollbar:滚动条整体部分
::-webkit-scrollbar-thumb:滚动条小方块(上下或左右拖拉那个小部件)
::-webkit-scrollbar-track:滚动条滑动轨道
::-webkit-scrollbar-button:滚动条两端的小按钮

5.三角形角标

div {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: black;
}

6.iOS的audio/video无法自动播放、循环播放问题

let media=  document.getElementById('media');
let state = 0;
document.addEventListener('touchstart', function() {
  if(state === 0) {
    media.play();
    state = 1;
  }
},false);
document.addEventListener('WeixinJSBridgeReady', function() {
  media.play();
},false);
media.onended = function() {
  media.load();
  media.play();
}

7.水平垂直居中

// 1.position定位
div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
  margin: auto;
}

// 2.flex 通过父级控制子级居中
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}