diff options
Diffstat (limited to 'files/es/web/css/white-space/index.html')
| -rw-r--r-- | files/es/web/css/white-space/index.html | 421 |
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"><div class="grid"> +<div class="col"> + <div class="cell"> + <div class="label">normal</div> + <div> + <p class="wspNormal"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla pellentesque metus eget massa feugiat lobortis. + </p> + </div> + </div> + <div class="cell"> + <div class="label">pre-wrap</div> + <div> + <p class="wspPreWrap"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla pellentesque metus eget massa feugiat lobortis. + </p> + </div> + </div> + <div class="cell"> + <div class="label">pre-line</div> + <div> + <p class="wspPreLine"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla pellentesque metus eget massa feugiat lobortis. + </p> + </div> + </div> + <div class="cell"> + <div class="label">nowrap</div> + <div> + <p class="wspNowrap"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla pellentesque metus eget massa feugiat lobortis. + </p> + </div> + </div> + <div class="cell"> + <div class="label">pre</div> + <div> + <p class="wspPre"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla pellentesque metus eget massa feugiat lobortis. + </p> + </div> + </div> + <div class="note"> + Los ejemplos anteriores aplican al siguiente HTML (square represents white spaces): + <pre>☐☐&lt;p&gt; +☐☐☐☐Lorem ipsum dolor sit amet, consectetur adipiscing elit. +☐☐☐☐Nulla pellentesque metus eget massa feugiat lobortis. +☐☐&lt;/p&gt;</pre> + </div> +</div> +</div></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"> <div id="css-code" class="box"> + p { white-space: <select> + <option>normal</option> + <option>nowrap</option> + <option>pre</option> + <option>pre-wrap</option> + <option>pre-line</option> + </select> } + </div> + <div id="results" class="box"> + <p> 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.</p> + </div> +</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> <p> 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.</p> +</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><textarea></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> |