Two ways to hide the scroll bar when the text exceeds the scroll display using css (code example)-CSS Tutorial-php.cn

Two ways to hide the scroll bar when the text exceeds the scroll display using css (code example)

青灯夜游

Release： 2018-10-27 15:19:51

Original

8243 people have browsed it

How to realize the scrolling display of the text beyond the part and hide the scroll bar? This article will introduce to you two ways to use CSS to achieve the scrolling display effect after the text exceeds the limit, and to hide the scroll bar. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, in order to implement scrolling display in css after the text exceeds, we will use the css overflow attribute. I believe everyone is familiar with the css overflow attribute. It can be used when the text exceeds and the content will be When trimming, display the remaining content as a scroll bar for easier viewing. Let's take a look at how to hide the scroll bar of the CSS overflow attribute through a simple code example.

Method 1: Use inner and outer nesting to simulate

Code example:

<!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>

Copy after login

Rendering:

Two ways to hide the scroll bar when the text exceeds the scroll display using css (code example)

This method is compatible with all browsers, but it is more troublesome to use. You cannot declare any style for the scroll bar when using it

Method 2: Use the new features of css 3 -webkit-scrollbar,

Code example:

<!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>

Copy after login

Rendering:

Two ways to hide the scroll bar when the text exceeds the scroll display using css (code example)

This method is more convenient to use, but it is not compatible with Firefox and IE.

Summary: The above are the two methods introduced in this article to implement scrolling display of text after the text exceeds the limit and hide the scroll bar in CSS. Each has its own advantages and disadvantages. You can try it yourself to deepen your understanding. , choose to use according to your own needs. I hope it will be helpful to everyone's learning. For more related tutorials, please visit: CSS basic video tutorial, HTML video tutorial, bootstrap video tutorial!

The above is the detailed content of Two ways to hide the scroll bar when the text exceeds the scroll display using css (code example). For more information, please follow other related articles on the PHP Chinese website!