Deux façons de masquer la barre de défilement lorsque le texte dépasse l'affichage de défilement en utilisant CSS (exemple de code)-tutoriel CSS-php.cn

Deux façons de masquer la barre de défilement lorsque le texte dépasse l'affichage de défilement en utilisant CSS (exemple de code)

青灯夜游

Libérer： 2018-10-27 15:19:51

original

8219 Les gens l'ont consulté

Comment réaliser l'affichage défilant du texte au-delà de la partie et masquer la barre de défilement ? Cet article vous présentera deux façons d'utiliser CSS pour obtenir l'effet d'affichage défilant une fois que le texte dépasse la limite et pour masquer la barre de défilement. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d'abord, afin d'obtenir un affichage défilant en CSS une fois que le texte dépasse la limite, nous utiliserons l'attribut de débordement CSS Je pense que tout le monde connaît l'attribut de débordement CSS. Il peut être utilisé lorsque le texte dépasse la limite et que le contenu sera. Lors du découpage, affichez le contenu restant sous forme de barre de défilement pour une visualisation plus facile. Voyons comment masquer la barre de défilement de l'attribut de débordement CSS à travers un exemple de code simple.

Méthode 1 : Utiliser l'imbrication interne et externe pour simuler

Exemple de code :

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

Copier après la connexion

Rendu :

Deux façons de masquer la barre de défilement lorsque le texte dépasse laffichage de défilement en utilisant CSS (exemple de code)

Cette méthode est compatible avec tous les navigateurs, mais elle est plus gênante à utiliser. Vous ne pouvez déclarer aucun style pour la barre de défilement lorsque vous l'utilisez

Méthode 2 : Utiliser les nouvelles fonctionnalités de css 3 -webkit-scrollbar,

Exemple de code :

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

Copier après la connexion

Rendu :

Deux façons de masquer la barre de défilement lorsque le texte dépasse laffichage de défilement en utilisant CSS (exemple de code)

Cette méthode est plus pratique à utiliser, mais elle n'est pas compatible avec Firefox et IE.

Résumé : ci-dessus sont les deux méthodes présentées dans cet article pour utiliser CSS pour implémenter l'affichage par défilement une fois que le texte dépasse la limite et masquer la barre de défilement. Chacune a ses propres avantages et inconvénients. pour approfondir votre compréhension, choisissez d'utiliser selon vos propres besoins. J'espère que cela sera utile à l'apprentissage de tout le monde. Pour plus de didacticiels connexes, veuillez visiter : Tutoriel vidéo de base CSS , Tutoriel vidéo HTML , Tutoriel vidéo bootstrap !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!