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

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

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

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

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

代码示例:

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>超出部分滚动显示,滚动条隐藏</title> </head> <style type="text/css">     #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;     } </style> <body>     <!-- 兼容所有浏览器的超出部分滚动,滚动条隐藏 -->     <div id="box">         <div>          这是一段测试文字,文本超出部分滚动显示,滚动条隐藏 。<br />          这是一段测试文字,文本超出部分滚动显示,滚动条隐藏 。<br />          这是一段测试文字,文本超出部分滚动显示,滚动条隐藏 。<br />          这是一段测试文字,文本超出部分滚动显示,滚动条隐藏 。<br />          这是一段测试文字,文本超出部分滚动显示,滚动条隐藏 。         </div>     </div> </body> </html>

效果图:

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

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

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

代码示例:

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>超出部分滚动显示,滚动条隐藏</title> </head> <style type="text/css">     #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;     } </style> <body>     <!-- 兼容大部分浏览器,超出部分滚动,滚动条隐藏 -->     <div id="box">         <div>          这是一段测试文字,文本超出部分滚动显示,滚动条隐藏 。<br />          这是一段测试文字,文本超出部分滚动显示,滚动条隐藏 。<br />          这是一段测试文字,文本超出部分滚动显示,滚动条隐藏 。<br />          这是一段测试文字,文本超出部分滚动显示,滚动条隐藏 。<br />          这是一段测试文字,文本超出部分滚动显示,滚动条隐藏 。         </div>     </div>  </body> </html>

效果图:

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

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

总结:以上就是本篇文章所介绍的css实现文本超出后滚动显示,且隐藏滚动条的两种方法,各有各的优点和缺点,大家可以自己动手试试,加深理解,根据自己的需求来选择使用。希望能对大家的学习有所帮助,更多相关教程请访问: CSS基础视频教程, HTML视频教程,bootstrap视频教程!

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » css实现文本超出滚动显示时隐藏滚动条的两种方法(代码示例)

发表评论

提供最优质的资源集合

立即查看 了解详情