From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/white-space/index.html | 421 ++++++++++++++++++++++++++++++++ 1 file changed, 421 insertions(+) create mode 100644 files/es/web/css/white-space/index.html (limited to 'files/es/web/css/white-space') 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 +--- +
{{CSSRef}}
+ +

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 {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}, o {{cssxref("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;
+
+ + + +

{{EmbedLiveSample("white-space", "100%", 530, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

Sintáxis

+ +

La propiedad white-space se especifica con una de las palabras clave de la siguiente lista de valores.

+ +

Valores

+ +
+
normal
+
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.
+
nowrap
+
Reduce espacios en blanco igual que el modo normal, pero suprime saltos de linea del origen.
+
pre
+
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")}}.
+
pre-wrap
+
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
+
pre-line
+
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
+
+ +

La siguiente tabla resume el comportamiento de los diversos valores de white-space:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Nuevas líneasEspacios y tabulacionesAjuste de texto
normalContraerContraerAjustar
nowrapContraerContraerNo ajustar
prePreservarPreservarNo ajustar
pre-wrapPreservarPreservarAjustar
pre-linePreservarContraerAjustar
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ejemplo básico

+ +
code {
+  white-space: pre;
+}
+ +

La línea sedivide dentro de los elementos {{HTMLElement("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

+ + + +

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

+ +

{{ EmbedLiveSample('See_in_action', '80%', '500px') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}{{Spec2('CSS3 Text')}}Precisely defines the breaking algorithms.
{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}{{Spec2('CSS2.1')}}Definition inicial.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico (normal y nowrap)1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}5.5[1]4.01.0 (85)
pre1.0{{CompatVersionUnknown}}1.06.04.01.0 (85)
pre-wrap1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("1.9")}}		8.08.03.0 (522)
pre-line1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}8.09.53.0 (522)
Soporte en <textarea>1.0{{CompatUnknown}}{{CompatGeckoDesktop("36")}}5.54.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer 5.5+ supports {{Cssxref("word-wrap")}}: break-word;.

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf