css實作文字超出捲動顯示時隱藏捲軸的兩種方法（程式碼範例）
- 青灯夜游原創
- 2018-10-27 15:19:518234瀏覽
如何實現文字超出部分滾動顯示，並隱藏捲軸？這篇文章就為大家介紹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 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>效果圖：
#這種方法使用起來比較方便，但是不相容於火狐和IE。
總結：以上就是本篇文章所介紹的css實現文本超出後滾動顯示，且隱藏滾動條的兩種方法，各有各的優點和缺點，大家可以自己動手試試，加深理解，根據自己的需求來選擇使用。希望能對大家的學習有所幫助，更多相關教學請造訪： CSS基礎影片教學， HTML影片教學，bootstrap影片教學！
以上是css實作文字超出捲動顯示時隱藏捲軸的兩種方法（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn