css实现文本超出滚动显示时隐藏滚动条的两种方法(code)

web前端|css教程

css,文本滚动,隐藏滚动条

web前端-css教程

如何实现文本超出部分滚动显示，并隐藏滚动条？本篇文章就给大家介绍css实现文本超出后滚动显示效果，并且滚动条隐藏的两种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

kangle php显示源码,vscode 多窗口打开,调出终端 ubuntu,tomcat启动本地项目,小程序用sqlite数据库,博彩爬虫,for循环递归php,芜湖seo优化询问报价,北京模板网站建设,服装模板软件lzw

首先css要实现文本超出后滚动显示，我们就会使用到css overflow 属性，相信大家对于css overflow 属性并不陌生，它可以在文本超出，内容将被修剪时，以滚动条的方式显示其余的内容，以便查看。下面通过简单的代码示例，我们来看看如何隐藏css overflow 属性的滚动条。

收银系统源码免费版,树莓派 vscode 黑屏,ubuntu 桌面种类,tomcat8.0.3漏洞,sqlite做网络数据库怎么样,爬虫828,php 判断数组值为空,河源seo哪家专业,手机h5免费模板网站,easy ui后台管理模板lzw

方法一：利用内外层嵌套, 模拟

二维码防伪系统源码,vscode c 输出,ubuntu登录用户名错误,tomcat 开启进程,sqlite查找开头,jq自定义弹窗插件,移动html5前端框架,推特爬虫发私信,php 安装 pdo,无锡seo结算,冠龙科技网站源码,淘宝网页代码模板,毕业摄影作品集模板下载lzw

代码示例：

#box { /* 父容器设置宽度, 并超出部分不显示 */ width: 300px; height: 200px; overflow: hidden; border: 1px solid red; } #box > div { /* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */ width: 317px; height: 200px; line-height: 30px; overflow-y: scroll; padding: 5px; }

这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。

这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。

这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。

这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。

这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。

效果图：

这种方法可以兼容所有的浏览器, 但使用起来比较麻烦, 使用时不能对滚动条声明任何样式

方法二：利用 css 3 的新特性 -webkit-scrollbar,

代码示例：

#box { width: 300px; height: 200px; overflow-x: hidden; overflow-y: scroll; line-height: 30px; margin: 100px auto; border: 1px solid red; } #box::-webkit-scrollbar { display: none; }

这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。

这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。

这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。

这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。

这是一段测试文字，文本超出部分滚动显示，滚动条隐藏 。

效果图：

这种方法使用起来比较方便，但是不兼容 火狐 和 IE。

总结：