overflow-x

  • Raccourci de la révision : CSS/overflow-x
  • Titre de la révision : overflow-x
  • ID de la révision : 348451
  • Créé :
  • Créateur : PetrushLeFou
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable() }}

Résumé

La propriété CSS overflow-x définie comment le contenu est rogné dans le sens horizontal, les barres de défilement affichées ou afficher le contenu en débord dans un élément bloc sur ses cotés droit et gauche.

  • {{ Xref_cssinitial() }} {{ Cssxref("visible") }}
  • S'applique àéléments de niveau bloc et bloc en ligne
  • {{ Xref_cssinherited() }} non
  • Media visuel
  • {{ Xref_csscomputed() }} comme spécifiée, sauf ‘visible’

Syntaxe

Formal syntax:  visible | hidden | scroll | auto
overflow-x: visible
overflow-x: hidden
overflow-x: scroll
overflow-x: auto

overflow-x: inherit

Values

visible
Valeur par défaut. Le contenu n'est pas rogné, il peut être affiché en dehors de la boîte de contenu à droite ou à gauche.
hidden
Le contenu est rogné à droite et à gauche et aucune barre de défilement horizontale n'est affichée.
scroll
Le contenu est rogné et les navigateurs de bureau utilisent des barres de défilement horizontales, que du contenu soit rogné ou non. Ceci évite tout problème de barre de défilement qui apparaissent puis disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu hors cadre.
auto
Dépend de l'user-agent. Les navigateurs de bureau comme Firefox affichent des barres de défilement horizontales si le contenu dépasse à droite ou à gauche.

Exemples

nav {  
     overflow-x: auto;   /* ajoute des barres de défilement horizontales si nécessaire */ 
}

Spécifications

Specification Status Comment
{{ SpecName('CSS3 Box', '#overflow-x', 'overflow-x') }} {{ Spec2('CSS3 Box') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1.9.1") }} 5.0 [*] 9.5 3.0
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("1.9.1") }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

[*] IE8 introduced -ms-overflow-x as a  synonym for overflow-x. Don't use the -ms- prefix.

Voir aussi

  • Propriétés CSS liées: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }}

Source de la révision

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Summary" name="Summary">Résumé</h2>
<p>La propriété CSS <code>overflow</code><code>-x</code> définie comment le contenu est rogné dans le sens horizontal, les barres de défilement affichées ou afficher le contenu en débord dans un élément bloc sur ses cotés droit et gauche.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> {{ Cssxref("visible") }}</li>
  <li><dfn>S'applique à</dfn>éléments de niveau bloc et bloc en ligne</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> non</li>
  <li><dfn>Media</dfn> visuel</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> comme spécifiée, sauf ‘visible’</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntaxe</h2>
<pre class="twopartsyntaxbox">
Formal syntax:  visible | hidden | scroll | auto
</pre>
<pre>
overflow-x: visible
overflow-x: hidden
overflow-x: scroll
overflow-x: auto

overflow-x: inherit
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
  <dt>
    <code>visible</code></dt>
  <dd>
    Valeur par défaut. Le contenu n'est pas rogné, il peut être affiché en dehors de la boîte de contenu à droite ou à gauche.</dd>
  <dt>
    <code>hidden</code></dt>
  <dd>
    Le contenu est rogné à droite et à gauche et aucune barre de défilement horizontale n'est affichée.</dd>
  <dt>
    <code>scroll</code></dt>
  <dd>
    Le contenu est rogné et les navigateurs de bureau utilisent des barres de défilement horizontales, que du contenu soit rogné ou non. Ceci évite tout problème de barre de défilement qui apparaissent puis disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu hors cadre.</dd>
  <dt>
    <code>auto</code></dt>
  <dd>
    Dépend de l'user-agent. Les navigateurs de bureau comme Firefox affichent des barres de défilement horizontales si le contenu dépasse à droite ou à gauche.</dd>
</dl>
<h2 id="Examples" name="Examples">Exemples</h2>
<pre class="eval">
nav {  
     overflow-x: auto;   /* ajoute des barres de défilement horizontales si nécessaire */ 
}
</pre>
<h2 id="Specifications" name="Specifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Box', '#overflow-x', 'overflow-x') }}</td>
      <td>{{ Spec2('CSS3 Box') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
        <td>5.0 [*]</td>
        <td>9.5</td>
        <td>3.0</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoMobile("1.9.1") }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[*] IE8 introduced<code> -ms-overflow-x </code>as a&nbsp; synonym for<code> overflow-x</code>. Don't use the <code>-ms-</code> prefix.</p>
<h2 id="See_also" name="See_also">Voir aussi</h2>
<ul>
  <li>Propriétés CSS liées: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }}</li>
</ul>
Revenir à cette révision