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;
            }

其實橫向滾動條的原理非常的簡單就是給外層的盒子一個固定的寬度,當盒子中的內容超過了盒子的寬度就讓其出現滾動條就可以了 我們要注意關鍵的幾點 :

1、第一點就是我們一定要在給外層的盒子設置css樣式的時候要設置如果超出了的話如何顯示滾動條就是overflow-x(x軸顯示滾動條)overflow-y(y軸顯示滾動條)必須要搞清楚自己需要顯示怎樣的滾動條。

2、第二點就是我們必須要讓盒子的內容在一行顯示,不要讓內容折行,這些上面的css樣式中都有,不讓內容折行是white-space:nowrap,內容在一行顯示text-align: center。

3、超出后顯示滾動滾動可以使用overflow: auto也可以使用overflow: scroll

下面我們看一下文本超出顯示三個小圓點的例子:

我給li定義了固定的寬度只要超出后就會顯示三個小圓點,在css樣式中也加上了注釋，非常的清晰。

這樣我們就完成了橫向滾動條和文本超出顯示三個小圓點這兩個功能。

最后:誠摯的希望此文章能夠幫助到正在觀看的你，如有不理解或者有漏洞可以在評論中進行交流謝謝。