Quelle est la difference entre overflow: hidden et display: none

StackOverflow https://stackoverflow.com/questions/132649

  •  02-07-2019
  •  | 
  •  

Question

Quelle est la différence entre overflow: hidden et display: none?

Était-ce utile?

La solution

Exemple: 

.oh
{
  height: 50px;
  width: 200px;
  overflow: hidden;
}

Si le texte dans le bloc de cette classe est plus grand (plus long) que ce que cette petite boîte peut afficher, l’excédent sera simplement masqué. Vous ne verrez que le début du texte.

display: none; masquera simplement le bloc.

Notez que vous avez également visibilité: hidden; qui masque le contenu du bloc, mais le bloc sera toujours dans la mise en page, déplaçant des éléments.

Autres conseils

display: none supprime l'élément de la page et le déroulement de la page agit comme s'il n'était pas là du tout.

débordement: masqué :

  

La propriété CSS overflow: hidden peut être utilisée pour révéler plus ou moins un élément en fonction de la largeur de la fenêtre du navigateur.

Débordement: masqué dit simplement que si le texte passe à l'extérieur de cet élément, les barres de défilement ne s'affichent pas. display: aucun indique que l'élément n'est pas affiché.

Exemple simple de dépassement: masque http://www.w3schools.com /Css/tryit.asp?filename=trycss_pos_overflow_hidden

Si vous éditez le CCS sur cette page, vous pouvez voir la différence entre les attributs de débordement (visible | caché | faire défiler | auto) - et si vous ajoutez display: none au fichier css, vous verrez que le bloc de contenu entier est disparaît.

En gros, c’est un moyen de contrôler la disposition et l’élément " flux " - Si vous autorisez la saisie de l'utilisateur (à partir d'un champ CMS, par exemple), à ??effectuer le rendu dans un bloc de taille fixe, vous pouvez ajuster l'attribut de débordement pour que la taille de la boîte ne s'agrandisse et ne perde donc pas la présentation de la page. (à l’inverse, display: aucun empêche l’affichage de l’élément et donc la page entière est ré-ajustée)

Par défaut, les éléments HTML sont aussi hauts que nécessaire pour contenir leur contenu.

Si vous attribuez une hauteur fixe à un élément HTML, il risque de ne pas être assez grand pour contenir son contenu. Ainsi, par exemple, si vous avez un paragraphe avec une hauteur fixe et un fond bleu: 

<p>This is an example paragraph. It has some text in it to try and give it a reasonable height. In a separate style sheet, we’re going to give it a blue background and a fixed height. If we add overflow: hidden, we won’t see any text that extends beyond the fixed height of the paragraph. Until then, the text will “overflow” the paragraph, extending beyond the blue background.</p>

p {
    background-color: #ccf;
    height: 20px;
}

Le texte dans le paragraphe s'étendrait au-delà du bord inférieur du paragraphe.

La propriété overflow vous permet de modifier ce comportement par défaut. Donc, si vous avez ajouté overflow: hidden : 

p {
    background-color: #ccf;
    height: 20px;
    overflow: hidden;
}

Ensuite, vous ne verrez plus le texte au-delà du bord inférieur du paragraphe. Il serait fixé à la hauteur fixe du paragraphe.

display: none ferait simplement disparaître (visuellement) tout le paragraphe, son fond bleu et tout le reste, comme s'il n'apparaissait pas du tout dans le code HTML.

Supposons que vous ayez un div mesurant 100 x 100 pixels

.

Vous y mettez alors tout un tas de texte, tel qu’il déborde de la div. Si vous utilisez overflow: hidden; , le texte qui s'inscrit dans le format 100x100 ne sera pas affiché et n'affectera pas la présentation.

display: none est complètement différent. Il restitue le reste de la page comme si si le div était toujours visible. Même s'il y a débordement, cela sera pris en compte. Il laisse simplement de la place pour div , mais ne le restitue pas. Si les deux sont définis: display: none; overflow: hidden; , il ne sera pas affiché, le texte ne sera pas dépassé et la page sera rendue comme si l'invisible div était toujours là.

Pour que le div n’affecte absolument pas le rendu, les deux affichent: none; overflow: hidden; doit être défini et également, par exemple, définissez height: 0; . Ou avec width , ou les deux, la page sera rendue comme si le div n'existait pas du tout.

overflow: hidden - masque le débordement du contenu, contrairement à overflow: auto qui affiche des barres de défilement sur un div de taille fixe dont le contenu interne est plus grand que sa taille

display: none - masque un élément et ne participe absolument pas à la présentation du contenu

P.S. il n'y a pas de différence entre les deux, ils sont complètement indépendants

display: none signifie que la balise en question n'apparaîtra pas du tout sur la page (bien que vous puissiez toujours interagir avec elle via le dom). Il n'y aura pas d'espace alloué pour cela entre les autres balises. Débordement masqué signifie que la balise est rendue avec une certaine hauteur et que tout texte, etc., qui entraînerait le développement de la balise pour la rendre ne s'affichera pas. Je pense que ce que vous voulez demander, c'est la visibilité: cachée. Cela signifie que contrairement à no, la balise n'est pas visible, mais de la place lui est allouée sur la page. donc par exemple 

<span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>

affichage: aucun ne serait:

test | & nbsp; | test

visibilité: masqué serait:

test | & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; | test

En visibilité: la balise masquée est rendue, elle n'est tout simplement pas visible sur la page.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top