initial commit

1 files changed, 118 insertions, 0 deletions

diff --git a/files/es/web/css/overflow/index.html b/files/es/web/css/overflow/index.html
new file mode 100644
index 0000000000..bdc053d2d4
--- /dev/null
+++ b/files/es/web/css/overflow/index.html
@@ -0,0 +1,118 @@
+---
+title: overflow (excedente)
+slug: Web/CSS/overflow
+translation_of: Web/CSS/overflow
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Sumario</h2>
+
+<p>La propiedad CSS <code>overflow</code>  especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.</p>
+
+<p>Usando la propiedad <code>overflow</code> con un valor distinto a <code>visible</code>, valor por defecto, creará un nuevo <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">contexto de formatos de bloques</a>. Esto es técnicamente necesario debido a que si un elemento flotante interceptara con otros forzaría a reajustar el contenido alrededor de los elementos que se interceden. El reajuste sucedería luego de cada desplazamiento, y llevaría a un desplazamiento demasiado lento.</p>
+
+<p>Nótese que, cambiando programáticamente el valor de <code>scrollTop</code> al elemento HTML relevante, incluso cuando <code>overflow</code> tenga el valor <code>hidden</code> un elemento podría necesitar ser desplazado.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintáxis formal</a>: {{csssyntax("overflow")}}</pre>
+
+<pre>overflow: visible
+overflow: hidden
+overflow: scroll
+overflow: auto
+
+overflow: inherit
+</pre>
+
+<h3 id="Values" name="Values">Valores</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Valor por defecto. El contenido no es recortado, podría ser dibujado fuera de la caja contenedora.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>El contenido es recortado y no se muestran barras de posición.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>El contenido es recortado y el navegador web usa las barras de desplazamiento, se haya recortado contenido o no. Esto previene cualquier problema con las barras de desplazamiento apareciendo o desapareciendo en un entorno dinámico. Puede que las impresoras impriman contenido excedente.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Depende del agente de usuario. Navegadores de escritorio como Firefox proveen barras de desplazamiento si hay contenido excedente.</dd>
+</dl>
+
+<h4 id="Mozilla_Extensions" name="Mozilla_Extensions">Extensiones de Mozilla</h4>
+
+<dl>
+ <dt><code>-moz-scrollbars-none </code>{{ obsolete_inline() }}</dt>
+ <dd>Usar <code>overflow:hidden</code>.</dd>
+ <dt><code>-moz-scrollbars-horizontal </code>{{ Deprecated_inline() }}</dt>
+ <dd>Es preferible el uso de {{ Cssxref("overflow-x") }} y {{ Cssxref("overflow-y") }}.</dd>
+ <dt><code>-moz-scrollbars-vertical </code>{{ Deprecated_inline() }}</dt>
+ <dd>Es preferible el uso de {{ Cssxref("overflow-x") }} y {{ Cssxref("overflow-y") }}.</dd>
+ <dt>-moz-hidden-unscrollable {{ non-standard_inline() }}</dt>
+ <dd>Es usada principalmente para uso interno y por temas. Deshabilita el desplazamiento en elementos XML root y <code>&lt;html&gt;</code>, <code> &lt;body&gt;</code> usando las flechas del teclado o la rueda del ratón.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Ejemplos</h2>
+
+<pre class="brush: css">p {
+     width: 12em;
+     border: dotted;
+     overflow: visible;   /* dibuja barras si es necesario */
+}
+</pre>
+
+<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (por defecto)<br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre>p { overflow: hidden; /* no se dibujan barras */ }
+</pre>
+
+<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre>p { overflow: scroll; /* se dibujan ambas barras */ }
+</pre>
+
+<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre>p { overflow: auto; /* se dibujan barras según se necesite */ }
+</pre>
+
+<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box', '#overflow1', 'overflow') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>Sin cambios.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("css.properties.overflow")}}</p>
+
+<h2 id="See_also" name="See_also">Véase también</h2>
+
+<ul>
+ <li>Propiedades CSS relacionadas: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }} (</li>
+</ul>