超出一行用...代替

.online{
    display: block;    /*設定為flex ...不生效*/
    width: 100px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

超出三行用...代替

.mutiline{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

html5禁止頁面縮放

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

<div class="div-tip">
    <div class="div-text-tip">當天10次收徒機會已用完，明天再來哦</div>
</div>

.div-tip {
  width: 100%;
  display: flex;
  justify-content: center;
}

.div-text-tip {
  height: .7rem;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 50%;
  padding: .2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: .1rem;
  font-size: .28rem;
}
 

顏色翻轉：

filter: invert(100%);

阿拉伯語頁面翻轉：

direction: rtl;

灰度網站：

filter: grayscale(100%);

H5 ios點擊出現背景色

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

H5 禁止選中

html {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

H5 ios雙擊滾動

<script>
        var agent = navigator.userAgent.toLowerCase(); //檢測是否是ios
        var iLastTouch = null; //快取上一次tap的時間
        if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0) {
            document.body.addEventListener('touchend', function (event) {
                var iNow = new Date()
                    .getTime();
                iLastTouch = iLastTouch || iNow + 1 /** 第一次時將iLastTouch設為當前時間+1 */ ;
                var delta = iNow - iLastTouch;
                if (delta < 500 && delta > 0) {
                    event.preventDefault();
                    return false;
                }
                iLastTouch = iNow;
            }, false);
        }
    </script>