页面常见功能

页面常见功能

1.div中超出内容不换行可左右滑动

html代码

 <div class='box'> 
    <section>内容不换行</section> 
    <section>可左右滑动</section> 
 </div>

css代码

.box{ 
    width:80px;
    overflow-x:auto;  设置滚动条
    white-space:nowrap; 超出内容不换行
}
.box::-webkit-scrollbar {
        display: none; 隐藏滚动条
}

2. 文本溢出部分用 ··· 代替

但行文本溢出隐藏

div { //单行文本溢出
  width:50px; 
  white-space: nowrap; 文本不会换行
  overflow: hidden;
  text-overflow: ellipsis; //文本溢出显示省略号
}

多行文本溢出隐藏

div { //多行文本溢出
  overflow: hidden;
  text-overflow:ellipsis;//文本溢出显示省略号
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  width:130px;
}

跨浏览器兼容的方法

div {
  position:relative;
  line-height:1.4em;
  height:2.8em;
  overflow:hidden;
  width:300px;
}
div::after{
  content:"...";
  font-weight:bold;
  position:absolute;
  bottom:0;
  right:0;
  padding-left:20px;
  background: -webkit-linear-gradient(left, transparent, #fff 62%);
  background: -o-linear-gradient(right, transparent, #fff 62%);
  background: -moz-linear-gradient(right, transparent, #fff 62%);
  background: linear-gradient(to right, transparent, #fff 62%);
}

js实现溢出省略号…

<div id="box">
     浏览器兼容伪类写法css溢出部分css溢出部分css溢出部分
     css溢出部分css溢出部分css溢出部分css溢出部分
</div>
.box{
    width:300px;
}
<script type="text/javascript">
    function overFlow(num,con){
        var contain = document.getElementById(con);
        console.log(con);
        var maxSize = num;
        var txt = contain.innerHTML;
        if(txt.length>num){
            console.log('1');
            txt = txt.substring(0,num-1)+"...";
            contain.innerHTML = txt;
        }else{
            console.log("error")
        }
    };
    overFlow(40,'box');
</script>

3.图片未加载出来会有边框出现，如何去掉？(css)

类名:not([src]) {opacity: 0}

4.手机上去掉点击出现的蓝色阴影(css)

-webkit-tap-highlight-color: transparent;/*清除移动端点击高亮效果*/

5.html中循环渲染图片，并放入html中

 //jq方法
 $(function(){
     var html = '';
     var data = [
         {'img':"http://i1.mopimg.cn/img/tt/2017-09/1465/20170926180405564.jpg",'tracker':'1'},{'img':"http://i1.mopimg.cn/img/tt/2017-09/1465/20170926180405564.jpg",'tracker':'1'},{'img':"http://i1.mopimg.cn/img/tt/2017-09/1465/20170926180405564.jpg",'tracker':'1'},
    ]
    for(var i=0;i<data.length;i++){
        html+='<li><img src="'+data[i].img+'"/>></li>
    }
 })

 //原生js方法
 window.onload = function(){
    var lunbos = [
        {"img": "http://i1.mopimg.cn/img/tt/2017-09/1465/20170926180405564.jpg"}, 
        {"img": "http://i1.mopimg.cn/img/tt/2017-09/1465/20170926180405564.jpg"}
    ]; 
        //获取第一个ul
    var clearFix = document.querySelector('.clearfix');
        // 获取类名为imgUrl的标签
    var points2 = clearFix.getElementsByClassName('imgUrl');
        //循环模拟数据中的值，将循环出来的值放入创建的字符串 html中
    for (var i = 0; i < lunbos.length; i++) {
        html += '<li><a><img src="' + lunbos[i].img + '" class="imgUrl"/></a></li>'
    };
        //将循环出来的html放到 第一个ul标签中
    clearFix.innerHTML = html;
}