HTML横向滚动条和文本超出显示三个小圆点

Posted 2021-03-18 xiaoxiaoxiongmao

 我们这次要说的就是:现在有很多的公司以及很多的app软件经常使用的两个方法横向滚动条和文本超出三个小圆点

横向滚动条:顾名思义嘛,就是能够一块内容可以横着滑动.

文本超出三个小圆点:文本超出就是当文本的内容超出了我们的所定的盒子宽度,我们将多余的文本隐藏替换成i小圆点进行显示.

自己刚才写了一个简单横向滚动条的例子,我们看一下代码

html部分:

 

<div class="top">
     <div class="box_top">
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
            <span>1111</span> 
            <span>1111</span>
            <span>1111</span>
            <span>1111</span>
     </div>
</div>    

 

 

css部分:

 

.box_top{
                width: 100%;
                height: 2rem;
                background: green;
                padding-left: 0.3rem;
                padding-right: 0.3rem;
                box-sizing: border-box;
                overflow-x: auto;
                white-space:nowrap;
            }
            .box_top span{
                background: pink;
                display: inline-block;
                width: 1rem;
                height: 2rem;
                text-align: center;
                vertical-align: middle;
            }

 

其实横向滚动条的原理非常的简单就是给外层的盒子一个固定的宽度,当盒子中的内容超过了盒子的宽度就让其出现滚动条就可以了 我们要注意关键的几点 :

1、第一点就是我们一定要在给外层的盒子设置css样式的时候要设置如果超出了的话如何显示滚动条就是overflow-x(x轴显示滚动条)overflow-y(y轴显示滚动条)必须要搞清楚自己需要显示怎样的滚动条。

2、第二点就是我们必须要让盒子的内容在一行显示,不要让内容折行,这些上面的css样式中都有,不让内容折行是white-space:nowrap,内容在一行显示text-align: center。

3、超出后显示滚动滚动可以使用overflow: auto也可以使用overflow: scroll

下面我们看一下文本超出显示三个小圆点的例子:

我给li定义了固定的宽度只要超出后就会显示三个小圆点,在css样式中也加上了注释，非常的清晰。

这样我们就完成了横向滚动条和文本超出显示三个小圆点这两个功能。

最后:诚挚的希望此文章能够帮助到正在观看的你，如有不理解或者有漏洞可以在评论中进行交流谢谢。