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樣式中也加上了註釋，很是的清晰。

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

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