Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
La propiedad white-space de CSS, determina cómo se maneja el espacio en blanco dentro de un elemento. Para hacer que las palabras se dividan en sí mismas, usa overflow-wrap, word-break, o hyphens en su lugar.
/* 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;
<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>☐☐<p> ☐☐☐☐Lorem ipsum dolor sit amet, consectetur adipiscing elit. ☐☐☐☐Nulla pellentesque metus eget massa feugiat lobortis. ☐☐</p></pre> </div> </div> </div>
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; }
| Valor inicial | normal |
|---|---|
| Applies to | all elements |
| Heredable | yes |
| Media | visual |
| Valor calculado | como se especifica |
| Animation type | discrete |
| Canonical order | el orden único no-ambigüo definido por la gramática formal |
Sintáxis
La propiedad white-space se especifica con una de las palabras clave de la siguiente lista de valores.
Valores
normal- Sequences of whitespace are collapsed. Newline characters in the source are handled the same as other whitespace. Lines are broken as necessary to fill line boxes.
nowrap- Collapses whitespace as for
normal, but suppresses line breaks (text wrapping) within the source. pre- Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at
<br>elements. pre-wrap- Sequences of whitespace are preserved. Lines are broken at newline characters, at
<br>, and as necessary to fill line boxes. pre-line- Sequences of whitespace are collapsed. Lines are broken at newline characters, at
<br>, and as necessary to fill line boxes.
La siguiente tabla resume el comportamiento de los diversos valores de white-space:
| Nuevas líneas | Espacios y tabulaciones | Ajuste de texto | |
|---|---|---|---|
normal |
Contraer | Contraer | Ajustar |
nowrap |
Contraer | Contraer | No ajustar |
pre |
Preservar | Preservar | No ajustar |
pre-wrap |
Preservar | Preservar | Ajustar |
pre-line |
Preservar | Contraer | Ajustar |
Formal syntax
normal | pre | nowrap | pre-wrap | pre-line
Ejemplos
Ejemplo básico
code {
white-space: pre;
}
La línea sedivide dentro de los elementos <pre>
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 */
}
See it in action
<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>
.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;
}
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);
})
Fuente
<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>
CSS + Resultado
Especificaciones
| Especificación | Estado | Comentario |
|---|---|---|
| CSS Text Module Level 3 La definición de 'white-space' en esta especificación. |
Working Draft | Precisely defines the breaking algorithms. |
| CSS Level 2 (Revision 1) La definición de 'white-space' en esta especificación. |
Recommendation | Definition inicial. |
Compatibilidad con navegadores
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
Soporte básico (normal y nowrap) |
1.0 | (Yes) | 1.0 (1.7 o anterior) | 5.5[1] | 4.0 | 1.0 (85) |
pre |
1.0 | (Yes) | 1.0 | 6.0 | 4.0 | 1.0 (85) |
pre-wrap |
1.0 | (Yes) | 1.0 (1.7 o anterior)-moz 3.0 (1.9) |
8.0 | 8.0 | 3.0 (522) |
pre-line |
1.0 | (Yes) | 3.5 (1.9.1) | 8.0 | 9.5 | 3.0 (522) |
Soporte en <textarea> |
1.0 | ? | 36 (36) | 5.5 | 4.0 | 1.0 (85) |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | ? | ? | ? | ? |
[1] Internet Explorer 5.5+ supports word-wrap: break-word;.
See also
- Properties that define how words break within themselves:
overflow-wrap,word-break,hyphens
Etiquetas y colaboradores del documento
Colaboradores en esta página:
missmakita
Última actualización por:
missmakita,