css實作文字超出捲動顯示時隱藏捲軸的兩種方法（程式碼範例）-css教學-PHP中文網

首頁

web前端

css教學

css實作文字超出捲動顯示時隱藏捲軸的兩種方法（程式碼範例）

青灯夜游

Oct 27, 2018 pm 03:19 PM

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實作文字超出捲動顯示時隱藏捲軸的兩種方法（程式碼範例）