CSS es una hoja de estilo en cascada que proporciona diferentes propiedades a los elementos HTML para fines de estilo. Hay cientos de propiedades, como align de texto, borde, margen, acolchado, ancho, altura y más. Mientras escribe un párrafo grande en HTML, puede haber espacio no deseado entre el texto, o a veces se requiere mostrar texto de manera específica. En tal escenario, utilice el CSS "espacio blanco"Propiedad para controlar espacios blancos dentro del texto.

En este manual, la propiedad del espacio blanco CSS se discutirá con ejemplos. Entonces, comencemos!

¿Qué es la propiedad CSS White-Space??

El CSS "espacio blanco"La propiedad maneja los espacios blancos dentro del elemento.

Sintaxis

La sintaxis de la propiedad del espacio blanco se menciona a continuación. Puede asignar un valor de acuerdo con sus preferencias:

White-Space: Nowrap | Pre-Wrap | Normal | Inicial | Hereder | Pre | Pre-Line;

Entonces, antes de que nos apresuremos a la discusión, aprendamos sobre los valores asociados con esta propiedad uno por uno!

White-Space: Nowrap

La propiedad del espacio blanco con el valor "nower"Se derrumba los espacios blancos en una línea. Elimina las roturas de la línea en la fuente y nunca envuelve el texto. Además, el texto continúa hasta la ocurrencia del
etiqueta.

Ejemplo

Pasemos al ejemplo práctico, en el que escribiremos algunos párrafos. Luego se aplican con la propiedad del espacio blanco con sus diferentes valores y ven sus resultados.

Html

Dentro del elemento corporal del archivo HTML:

• Agregue un DIV con el nombre de la clase "envase".
• Luego añade

  etiqueta y

  Etiqueta con una clase llamada "título".

• Después de eso, un

  La etiqueta se coloca para agregar un párrafo en la página web.

Nota: Para ver el funcionamiento de los diferentes valores de propiedad del espacio blanco, hemos colocado espacios blancos dentro del párrafo:

La propiedad del espacio blanco

White-Space: Nowrap:

Somos un equipo. Trabajamos juntos para una misión común. Somos un equipo.
Trabajamos juntos para una misión común. Somos un equipo.

Dentro de la etiqueta de la cabeza de HTML, agregue la etiqueta.

CSS

cuerpo
Color de fondo: #A9B6EB;

El "color de fondoSe utiliza la propiedad para establecer el color de fondo del elemento del cuerpo.

Estilo "Container" Div

.envase
Altura: 200px;
Color: RGB (19, 1, 56);

Aquí está la descripción del código dado:

• ".envase"Indica el contenedor de clase Div en el que el".Se conoce el signo como selector de clases.
• "altura"La propiedad establece la altura del elemento a 200px.
• "color"La propiedad especifica el color de la fuente.

Clase de estilo "encabezado" de estilo

.título
Text-Align: Center;

A continuación, agregue algunas propiedades de estilo a los encabezados H1 y H2 que se explican a continuación:

• ".título"Se utiliza para acceder a la clase de

  y

  elementos.

• "texto alineado"Propiedad con el valor establecido como"centro"Centrará el texto.

Clase de estilo "A"

.a
White-Space: Nowrap;

• ".a"Se refiere a la clase del párrafo.
• "espacio blanco"Propiedad con el valor establecido como"nower"Colapsará todos los espacios blancos.

Como podemos ver en la pantalla de salida dividida a continuación. El valor de Nowrap ha colapsado todos los espacios blancos del párrafo, y el texto no está envuelto en absoluto:

Espacio blanco: normal

Es el valor predeterminado de la propiedad de White-Space. Colapsa los espacios blancos en un solo carácter y envuelve el texto a la siguiente línea cuando sea necesario.

Sintaxis

En CSS, asigne el valor "normal"A la propiedad del espacio blanco:

espacio blanco: normal;

Se puede observar que los espacios blancos están colapsados ​​y el texto está envuelto. Las líneas se rompen como para llenar el espacio a continuación:

White-Space: pre

La secuencia espacial se conserva y las líneas se rompen cuando se cumple o enciende el carácter de Newline
. Más específicamente, el "pre"Value preserva tanto los descansos como los espacios.

Sintaxis

Para utilizarlo, asigne el valor previo a la propiedad a la propiedad White-Space como se menciona a continuación:

espacio blanco: pre;

Producción

White-Space: pre-línea

Mientras usa el "pre-línea"Los espacios blancos se derrumban y las líneas se rompen en los personajes de Newline, en
etiqueta. Además, también envuelve el texto,

Sintaxis

En CSS, la propiedad del espacio blanco se asignará el valor como se menciona a continuación:

Espacio blanco: pre-línea;

Al establecer el valor previo a la línea en la propiedad White-Space, el resultado se verá así:

White Space: heredar

El valor "heredar"Indica que esta propiedad debe heredar el valor de su elemento principal.

Sintaxis

Aquí está la sintaxis para especificar el valor de la propiedad del espacio blanco como heredado:

Espacio blanco: heredar;

El código anterior dará como resultado como se muestra en la imagen a continuación:

White-Space: Pre-Wrap

El "pre-wrap"El valor conserva los espacios, pestañas y Newline. También envuelve el texto.

Sintaxis

Espacio blanco: pre-envoltura;

Producción

White-Space: inicial

"inicial"Indica que la propiedad CSS se establece en su valor predeterminado. Este valor se puede asignar a la propiedad White-Space de la siguiente manera:

espacio blanco: inicial;

Producción

Consejo de bonificación

En CSS, hay algunos otros valores de propiedad del espacio blanco que puede explorar más a fondo:

• White-Space: Revertir
• White-Space: Revert-Shayer
• Espacio blanco: espacios blancos
• White-Space: Unset

Hemos aprendido los diversos valores de propiedad del espacio blanco y su uso.

Conclusión

En CSS, el "espacio blancoLa propiedad define cómo manejar los espacios blancos dentro de un elemento. Por ejemplo, a veces un código fuente de documento está escrito de una manera que no es para el renderizado final. Necesita algo de sangría y espacios. Para establecerlos en consecuencia, CSS nos permite usar la propiedad de White-Space que tiene diferentes valores. En este artículo, hemos explicado los valores de la propiedad del espacio blanco y su comportamiento con ejemplos.