Maison > Article > interface Web > Comment définir la barre de défilement horizontale div pour qu'elle ne s'affiche pas en HTML

Comment définir la barre de défilement horizontale div pour qu'elle ne s'affiche pas en HTML

WBOYoriginal: 2022-01-18 14:50:444426parcourir

En HTML, vous pouvez utiliser les attributs style et "overflow-x" pour configurer le div pour déplacer la barre de défilement horizontalement et ne pas l'afficher. Lorsque la valeur de l'attribut est définie sur "caché", le mécanisme de défilement horizontal le fera. ne soit pas fourni. La syntaxe est "
".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur Dell G3.

Comment définir la barre de défilement horizontale div pour qu'elle ne s'affiche pas en HTML

L'attribut overflow-x spécifie s'il faut couper le contenu du bord gauche/droit s'il déborde de la zone de contenu de l'élément.

La syntaxe est :
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
Les paramètres sont exprimés comme suit :

L'exemple est le suivant :
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
div
{
width:110px;
height:110px;
border:thin solid black;
overflow-y:hidden;
}
</style>
</head>
<body>
<div style="overflow-x:hidden;"><p style="width:140px">
In my younger and more vulnerable years my father gave me some advice that I&#39;ve been turning over in my mind ever since.
&#39;Whenever you feel like criticizing anyone,&#39; he told me, &#39;just remember that all the people in this world haven&#39;t had the advantages that you&#39;ve had.&#39; 
</p></div>
<p>Overflow-x指定是否要剪辑的左/右边缘的内容.</p>
<p>Overflow-y指定是否要剪辑的顶部/底部边缘的内容</p>
</body>
</html>
Lorsque le style style="overflow-x:hidden;" n'est pas ajouté au div élément, le résultat de sortie est le suivant :

L'exemple ci-dessus ajoute ce style, et le résultat de sortie est le suivant :

Tutoriel recommandé : "Tutoriel vidéo HTML"

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment résoudre le problème javascript json tronquéArticle suivant：Comment résoudre le problème javascript json tronqué

Articles Liés

Voir plus