实习笔记

实习笔记

文本溢出处理 – 文本要溢出的部分用省略号来显示

效果前后对比：

	p{
        font-size: 16px;
        overflow: hidden;
        // // 溢出用省略号显示
        text-overflow:ellipsis;
        // // 文本不换行
        white-space: nowrap;
        // white-space: wrap;
    }

• white-space属性是控制文本在超出宽度的情况下是否会自动换行，在p标签中，这个属性默认是true，也就是默认会自动换行
• 要实现这个自动省略号，以上的三个属性必须是配合使用，并且span标签在这个三个属性配合使用下是不能实现这个效果的，所以要做还是使用p标签在做这个功能

横向拖动进度条的效果

效果：

下面的进度条是动态的，要实现这个功能的主要的思路就是判断这个横向溢出但是可以滚动的盒子的滚动距离，

• 可以使用scroll事件，也就是盒子的滚动事件，当然要实现这个自动判断进度条的长度实现的细节有很多，这里就不具体的讲了，总之关键就是这个scroll事件，这个事件会默认传递一个参数e，可以使用e.target.scrollLeft来取出这个盒子滚动的距离
• 可以使用document.body.clientWidth来得出当前窗口的宽度，如移动端得出的就是移动端的宽度 这个也是自适应的。
• 最后一步就是根据得出的这两个值进行一系列的细节处理，最后是可以实现出增自动进度条的功能的。