我们此次要说的就是:此刻有很多的公司以及很多的app软件经常使用的两个要领横向滚动条和文本超过三个小圆点

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

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

本身适才写了一个简单横向滚动条的例子,我们看一下代码

html部分:

 

<div> <div> <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样式中也加上了注释，，非常的清晰。

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

最后:诚挚的但愿此文章能够辅佐到正在不雅观看的你，如有不理解或者有缝隙可以在评论中进行交流感谢。

 

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