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

如何實現文字超出部分滾動顯示，並隱藏捲軸？這篇文章就為大家介紹css實作文字超出後捲動顯示效果，並且捲軸隱藏的兩種方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

首先css要實現文字超出後捲動顯示，我們就會使用到css overflow 屬性，相信大家對於css overflow 屬性並不陌生，它可以在文字超出，內容會被修剪時，以捲軸的方式顯示其餘的內容，以便查看。下面透過簡單的程式碼範例，我們來看看如何隱藏css overflow 屬性的捲軸。

方法一：利用內外層巢狀, 模擬

#程式碼範例：

    
    



    
    

        

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

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

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

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

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

效果圖：

這種方法可以相容於所有的瀏覽器, 但使用起來比較麻煩, 使用時不能對捲軸聲明任何樣式

方法二：利用css 3 的新功能 -webkit-scrollbar,

程式碼範例：

    
    



    
    

        

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

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

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

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

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

效果圖：

#這種方法使用起來比較方便，但是不相容於火狐和IE。

總結：以上就是本篇文章所介紹的css實現文本超出後滾動顯示，且隱藏滾動條的兩種方法，各有各的優點和缺點，大家可以自己動手試試，加深理解，根據自己的需求來選擇使用。希望能對大家的學習有所幫助，更多相關教學請造訪： CSS基礎影片教學， HTML影片教學，bootstrap影片教學！

以上是css實作文字超出捲動顯示時隱藏捲軸的兩種方法（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！