initial commit

1 files changed, 421 insertions, 0 deletions

diff --git a/files/es/web/css/white-space/index.html b/files/es/web/css/white-space/index.html
new file mode 100644
index 0000000000..ddfc135d7c
--- /dev/null
+++ b/files/es/web/css/white-space/index.html
@@ -0,0 +1,421 @@
+---
+title: white-space
+slug: Web/CSS/white-space
+translation_of: Web/CSS/white-space
+---
+<div>{{CSSRef}}</div>
+
+<p>La propiedad <strong><code>white-space</code></strong> de CSS, determina cómo se maneja el espacio en blanco dentro de un elemento. Para hacer que las palabras se dividan <em>en sí mismas</em>, usa {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}, o {{cssxref("hyphens")}} en su lugar.</p>
+
+<pre class="brush: css no-line-numbers">/* Valores con palabras clave */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+
+/* Valores Globales */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+</pre>
+
+<div class="hidden" id="white-space">
+<pre class="brush: html">&lt;div class="grid"&gt;
+&lt;div class="col"&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;normal&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspNormal"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;pre-wrap&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspPreWrap"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;pre-line&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspPreLine"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;nowrap&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspNowrap"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;pre&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspPre"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="note"&gt;
+    Los ejemplos anteriores aplican al siguiente HTML (square represents white spaces):
+    &lt;pre&gt;☐☐&amp;lt;p&amp;gt;
+☐☐☐☐Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+☐☐☐☐Nulla pellentesque metus eget massa feugiat lobortis.
+☐☐&amp;lt;/p&amp;gt;&lt;/pre&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+pre { margin-bottom: 0; }
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  box-sizing: border-box;
+  margin: .5em;
+  padding: 0;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em;
+  font: .8em sans-serif;
+  text-align: left;
+  flex: none;
+}
+
+p {
+  width: 50%;
+  font: .8em sans-serif;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  resize: horizontal;
+  background: #E4F0F5;
+  padding: .5em;
+  margin: .5em auto 0;
+  text-align: left;
+}
+
+.wspNormal  { white-space: normal; }
+.wspNowrap  { white-space: nowrap; }
+.wspPre     { white-space: pre; }
+.wspPreWrap { white-space: pre-wrap; }
+.wspPreLine { white-space: pre-line; }</pre>
+</div>
+
+<p>{{EmbedLiveSample("white-space", "100%", 530, "", "", "example-outcome-frame")}}</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<p>La propiedad <code>white-space</code> se especifica con una de las palabras clave de la siguiente lista de valores.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Secuencias de espacios en blanco son reducidas a un solo espacio. Saltos de linea en el origen son tratados como un espacio en blanco. Agregar saltos de linea necesarios para llenar el contenedor.</dd>
+ <dt><code>nowrap</code></dt>
+ <dd>Reduce espacios en blanco igual que el modo <code>normal</code>, pero suprime saltos de linea del origen.</dd>
+ <dt><code>pre</code></dt>
+ <dd>Secuencias de espacios son preservados. Lineas son solo rotas en caracteres de saltos de linea encontrado en el origen y en elementos html {{HTMLElement("br")}}.</dd>
+ <dt><code>pre-wrap</code></dt>
+ <dd>Secuencias de espacio son preservadas. Lineas son rotas en caracteres de saltos de linea, en elementos html {{HTMLElement("br")}}, y agrega saltos necesarios para rellenar los cuadros de linea</dd>
+ <dt><code>pre-line</code></dt>
+ <dd>Secuencias de espacios en blanco son reducidas. Lineas son rotas en caracteres de salto de linea, en elementos html {{HTMLElement("br")}}, y los necesarios para rellenar los cuadros de linea</dd>
+</dl>
+
+<p>La siguiente tabla resume el comportamiento de los diversos valores de <code>white-space</code>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th> </th>
+   <th>Nuevas líneas</th>
+   <th>Espacios y tabulaciones</th>
+   <th>Ajuste de texto</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><code>normal</code></th>
+   <td>Contraer</td>
+   <td>Contraer</td>
+   <td>Ajustar</td>
+  </tr>
+  <tr>
+   <th><code>nowrap</code></th>
+   <td>Contraer</td>
+   <td>Contraer</td>
+   <td>No ajustar</td>
+  </tr>
+  <tr>
+   <th><code>pre</code></th>
+   <td>Preservar</td>
+   <td>Preservar</td>
+   <td>No ajustar</td>
+  </tr>
+  <tr>
+   <th><code>pre-wrap</code></th>
+   <td>Preservar</td>
+   <td>Preservar</td>
+   <td>Ajustar</td>
+  </tr>
+  <tr>
+   <th><code>pre-line</code></th>
+   <td>Preservar</td>
+   <td>Contraer</td>
+   <td>Ajustar</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_básico">Ejemplo básico</h3>
+
+<pre class="brush: css">code {
+  white-space: pre;
+}</pre>
+
+<h3 id="La_línea_sedivide_dentro_de_los_elementos_HTMLElement(pre)">La línea sedivide dentro de los elementos {{HTMLElement("pre")}}</h3>
+
+<pre class="brush: css">pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
+  white-space: pre-wrap;      /* Modern browsers */
+}</pre>
+
+<h2 id="See_in_action" name="See_in_action">See it in action</h2>
+
+<div class="hidden">
+<pre class="brush: html">    &lt;div id="css-code" class="box"&gt;
+     p { white-space: &lt;select&gt;
+       &lt;option&gt;normal&lt;/option&gt;
+       &lt;option&gt;nowrap&lt;/option&gt;
+       &lt;option&gt;pre&lt;/option&gt;
+       &lt;option&gt;pre-wrap&lt;/option&gt;
+       &lt;option&gt;pre-line&lt;/option&gt;
+     &lt;/select&gt; }
+    &lt;/div&gt;
+    &lt;div id="results" class="box"&gt;
+    &lt;p&gt;    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+    &lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box {
+  width: 300px;
+  padding: 16px;
+  border-radius: 10px;
+}
+
+#css-code {
+  background-color: rgb(220,220,220);
+  font-size: 16px;
+}
+
+#results {
+  background-color: rgb(230,230,230);
+  overflow-x: scroll;
+  height: 400px;
+  white-space: normal;
+  font-size: 14px;
+}</pre>
+
+<pre class="brush: js">var select  = document.querySelector("#css-code select");
+var results = document.querySelector("#results p");
+select.addEventListener("change", function(e) {
+  results.setAttribute("style", "white-space: "+e.target.value);
+})</pre>
+</div>
+
+<h3 id="Fuente">Fuente</h3>
+
+<pre>    &lt;p&gt;    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS_Resultado">CSS + Resultado</h3>
+
+<p>{{ EmbedLiveSample('See_in_action', '80%', '500px') }}</p>
+
+<h2 id="Especificaciones">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 Text', '#propdef-white-space', 'white-space')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Precisely defines the breaking algorithms.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definition inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico (<code>normal</code> y <code>nowrap</code>)</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>5.5<sup>[1]</sup></td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>pre</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+   <td>6.0</td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>pre-wrap</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("1.9")}}</td>
+   <td>8.0</td>
+   <td>8.0</td>
+   <td>3.0 (522)</td>
+  </tr>
+  <tr>
+   <td><code>pre-line</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>9.5</td>
+   <td>3.0 (522)</td>
+  </tr>
+  <tr>
+   <td>Soporte en <code>&lt;textarea&gt;</code></td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("36")}}</td>
+   <td>5.5</td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 5.5+ supports {{Cssxref("word-wrap")}}<code>: break-word;</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Propiedades que define como rompen las palabras d<em>entro de ellas mismas</em>: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}, {{cssxref("hyphens")}}</li>
+</ul>