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

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

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

原文地址:https://www.cnblogs.com/xiaoxiaoxiongmao/p/12157876.html

时间: 2024-10-09 08:42:59

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

文本超出显示省略号/数字字母折行有关css 属性

文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折行 word-break:break-all;  英文单词会分开折行 word-wrap:break-word; 英文单词完整处折行 令拓展: word-spacing :5px;  单词/字符之间间隔距离   white-space是字符是否换行显示的. 原文地址:https://www.cnbl

css 始终显示滚动条,内容超出显示有滑块的滚动条,内容没有超出显示空的滚动条

1.内容没有超出显示空的滚动条 <div class="div1"> 前端开发者前端开发者前端开发者前端开发者前端开发者 </div> css代码: .div1{ width:200px; height:300px; overflow-y:scroll; } 2.内容超出显示有滑块的滚动条 <div class="div1"> 前端开发者前端开发者前端开发者前端开发者前端开发者前端开发者前端开发者前端开发者前端开发者前端开发者前端

html+css文本超出显示省略号

text-overflow语法:text-overflow : clip | ellipsis text-overflow参数值和解释:clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢出时显示省略标记(...) text-overflow应用说明:CSS text-overflow设置或检索是否使用一个省略号标记(...)标示对象内文本文字的溢出. 简单理解:就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(wi

文本超出显示...

强制一行内显示,white-space:nowrap:第二个是溢出内容隐藏,overflow:hidden;

CSS中超出的文本内容显示省略号

首先,分析超出内容有两种情况,单行内容超出和多行内容超出,以下逐一说明: 单行内容操作: 单行操作必须有width属性,就是元素要有宽和高的限制才可以,具备以上基本条件之后,编写以下代码 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 此时,即可看到单行文本超出显示省略号的效果. 多行内容操作: 多行文本超出省略早期是没有该写法的,本文使用的是css3对WebKit的拓展写法,需要注意,该方法只适用于WebKit浏览器和移

多行文本超出显示省略号

多行文本超出显示为省略号的需求,仅仅用html和css很难满足需求了,可以借助js实现,看案例: <style> .text-overflow{ width:400px; line-height:20px; } </style> <div class="text-overflow" id="con"> 本文当中我们主要为大家演示如何实现文本超出显示为省略号,以及在网站开发时,什么时候应该考虑内容撑开宽高,还有合适考虑文本超出的问题

css文本超出部分用省略号表示

以前我在面试中遇到过这个问题,当时没答上来,现在回答一下: 1.设置三个属性: overflow:hidden   (超出部分隐藏) white-space:nowrap    (强制不换行) text-overflow:ellipsis     (文本超出用三个省略号代替) 2.代码部分截图: 3.最终效果: 原文地址:https://www.cnblogs.com/zhangnan35/p/11109210.html

css之超出部分不换行且显示横向滚动条

我不是专业前端,所以折腾了老半天啊QAQ 需求是两个div,内层div不换行且超出时外层div显示横向滚动条 类似以下这种: 刚开始的代码如下: <div class="nowrap"> <div class="item-t"></div> <div class="item-t"></div> <div class="item-t"></div>

WPF:解决DataGrid横向滚动条无法显示的问题

DataGrid的最后一列的宽度设置为“Width=”auto””即可. 如果显示指定长度或者设置为“*”,那么不管怎么拖动列头,或者不管行里面的内容有没有超过DataGrid的显示区域,DataGrid的横向滚动条都不会显示出来. 转载声明:本文转载至http://www.zhoumy.cn,文章链接:http://www.zhoumy.cn/?p=28