En este artículo, analizaremos la propiedad que se utiliza para controlar el flujo y el formato del texto.
La propiedad de espacio en blanco en CSS se usa para controlar el ajuste del texto y el espacio en blanco, es decir, esta propiedad se puede usar para configurar el manejo del espacio en blanco dentro de los elementos. Hay varios tipos de valores en esta propiedad para usar.
Sintaxis:
white-space: normal| nowrap| pre |initial;
Valores de propiedad: Todas las propiedades se describen bien en el siguiente ejemplo.
normal : por defecto, el valor de la propiedad es normal. Cuando la propiedad de espacio en blanco de CSS se establece en normal, cada secuencia de dos o más espacios en blanco aparecerá como un solo espacio en blanco. El contenido del elemento se ajustará donde sea necesario.
Sintaxis :
white-space: normal;
Ejemplo : este ejemplo ilustra el uso de la propiedad de espacio en blanco cuyo valor de propiedad se establece en normal.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | white-space Property </title>
<style>
div {
width: 500px;
height: 500px;
white-space: normal;
background-color: limegreen;
color: white;
font-size: 80px;
}
</style>
</head>
<body>
<center>
<div> GeeksforGeeks:
<br>
A Computer Science Portal For Geeks.
</div>
</center>
</body>
</html>
Producción:
nowrap : cuando la propiedad de espacio en blanco de CSS se establece en nowrap, cada secuencia de dos o más espacios en blanco aparecerá como un solo espacio en blanco. El contenido del elemento no se ajustará a una nueva línea a menos que se especifique explícitamente.
Sintaxis:
white-space: nowrap;
Ejemplo : este ejemplo ilustra el uso de la propiedad de espacio en blanco cuyo valor de propiedad se establece en nowrap.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | white-space Property </title>
<style>
div {
width: 300px;
height: 300px;
white-space: nowrap;
background-color: lightgreen;
color: black;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div>GeeksforGeeks:
A Computer Science Portal For Geeks.
</div>
</center>
</body>
</html>
Salida :
pre : este valor hace que el espacio en blanco tenga el mismo efecto que la etiqueta <pre> en HTML. El contenido del elemento se ajustará solo cuando se especifique mediante saltos de línea.
Sintaxis :
white-space: pre;
Ejemplo : este ejemplo ilustra el uso de la propiedad de espacio en blanco cuyo valor de propiedad se establece en pre.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | white-space Property </title>
<style>
div {
width: 300px;
height: 300px;
white-space: pre;
background-color: lightgreen;
color: black;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<div>
GeeksforGeeks: A Computer science portal for geeks.
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sravankumar8128 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA