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

 咱们此次要说的就是:如今有不少的公司以及不少的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;
            }

 

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

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

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

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

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

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

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

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