-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
147 lines (116 loc) · 4.56 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
---
title: overflow-inline
slug: Web/CSS/overflow-inline
l10n:
sourceCommit: 40cfeaf2623824ff3acf9d95af67a0498e23e3e8
---
{{CSSRef}}
La propriété [CSS](/fr/docs/Web/CSS) **`overflow-inline`** est une propriété logique qui définit ce qu'il faut afficher quand le contenu dépasse d'une boîte sur les bords en ligne (ceux parallèles au sens d'écriture). On peut choisir d'afficher rien, une barre de défilement ou de laisser le contenu dépasser.
> **Note :** La propriété `overflow-inline` correspond à [`overflow-y`](/fr/docs/Web/CSS/overflow-y) ou [`overflow-x`](/fr/docs/Web/CSS/overflow-x) selon le mode d'écriture du document.
## Syntaxe
```css
/* Valeurs avec un mot-clé */
overflow-inline: visible;
overflow-inline: hidden;
overflow-inline: clip;
overflow-inline: scroll;
overflow-inline: auto;
/* Valeurs globales */
overflow-inline: inherit;
overflow-inline: initial;
overflow-inline: revert;
overflow-inline: revert-layer;
overflow-inline: unset;
```
La propriété `overflow-inline` est définie avec une valeur de type [`<overflow>`](/fr/docs/Web/CSS/overflow_value) (voir les valeurs ci-après).
### Valeurs
- `visible`
- : Le contenu n'est pas rogné et peut être affiché en dehors des limites en ligne de la boîte.
- `hidden`
- : Le contenu qui dépasse est masqué afin de ne pas dépasser dans l'axe en ligne. Aucune barre de défilement n'est affichée.
- `clip`
- : Le contenu qui dépasse est rogné sur le bord de dépassement de l'élément, défini avec la propriété [`overflow-clip-margin`](/fr/docs/Web/CSS/overflow-clip-margin).
- `scroll`
- : Le contenu est rogné si nécessaire selon l'axe en ligne pour tenir dans la boîte (de remplissage). Les navigateurs affichent des barres de défilement que le contenu soit rogné ou non (on évite ainsi d'avoir des barres qui apparaissent/disparaissent lorsque le contenu change). Les imprimantes peuvent imprimer le contenu qui dépasse.
- `auto`
- : Le comportement de cette valeur dépend de l'agent utilisateur. Si le contenu tient dans la boîte de remplissage, elle se comportera comme `visible` mais établira un nouveau contexte de formatage. Les navigateurs de bureau affichent des barres de défilement si le contenu dépasse.
## Définition formelle
{{CSSInfo}}
## Syntaxe formelle
{{CSSSyntax}}
## Exemples
### HTML
```html
<ul>
<li>
<code>overflow-inline: hidden</code> (masque le texte en dehors de la boîte)
<div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: scroll</code> (ajoute une barre de défilement quoi
qu'il arrive)
<div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: visible</code> (affiche le texte en dehors de la
boîte si nécessaire)
<div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: auto</code> (équivalent à <code>scroll</code> pour la
plupart des navigateurs)
<div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: clip</code> (masque le texte en dehors de la boîte
au-delà du bord de dépassement)
<code>clip</code>
<div id="div5">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
</ul>
```
### CSS
```css
div {
border: 1px solid black;
width: 250px;
margin-bottom: 12px;
}
#div1 {
overflow-inline: hidden;
}
#div2 {
overflow-inline: scroll;
}
#div3 {
overflow-inline: visible;
}
#div4 {
overflow-inline: auto;
}
#div5 {
overflow-inline: clip;
overflow-clip-margin: 2em;
}
```
### Résultat
{{EmbedLiveSample("", "100%", "320")}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- Les propriétés CSS associées :
- [`clip`](/fr/docs/Web/CSS/clip)
- [`display`](/fr/docs/Web/CSS/display)
- [`overflow`](/fr/docs/Web/CSS/overflow)
- [`overflow-block`](/fr/docs/Web/CSS/overflow-block)
- [`overflow-clip-margin`](/fr/docs/Web/CSS/overflow-clip-margin)
- [`overflow-x`](/fr/docs/Web/CSS/overflow-x)
- [`overflow-y`](/fr/docs/Web/CSS/overflow-y)
- [`text-overflow`](/fr/docs/Web/CSS/text-overflow)
- [`white-space`](/fr/docs/Web/CSS/white-space)
- [Le module de spécification CSS sur le dépassement (<i lang="en">overflow</i>)](/fr/docs/Web/CSS/CSS_overflow)
- [Les propriétés logiques](/fr/docs/Web/CSS/CSS_logical_properties_and_values)
- [Les modes d'écritures](/fr/docs/Web/CSS/CSS_writing_modes)
- [Apprendre le débordement de contenu](/fr/docs/Learn/CSS/Building_blocks/Overflowing_content)