Cómo establecer el espacio y la colocación de texto en CSS

Mientras escribe un documento, uno debe organizar el texto correctamente. Esto ayudará a los usuarios a comprender el flujo de contenido y ayudas al leer el documento. Para hacerlo, debe haber ajustes de texto adecuados, como sangría, espacios de palabras, alineación, dirección y más. Más específicamente, CSS nos permite usar varias propiedades para ajustar el espacio y la colocación de texto.

El resultado de este artículo será:

• ¿Qué es el espacio de texto??
• Cómo usar las propiedades de espaciado de texto CSS
• ¿Cuáles son las propiedades de colocación de texto de CSS??
• Cómo usar las propiedades de colocación de texto de CSS?

¿Qué es el espacio de texto??

El espacio de texto se refiere a la cantidad de espacio entre el texto en particular. Se utilizan varias propiedades CSS para agregar espacios al texto.

Cómo usar las propiedades de espaciado de texto CSS?

Para proporcionar espacios dentro del texto, CSS nos permite usar diferentes propiedades, que se enumeran a continuación:

• espacio blanco
• guion de texto
• espacios de palabras
• altura de la línea
• espaciado de letras

Ejemplo 1: Cómo sangrar el texto del elemento?

CSS "guion de textoLa propiedad se utiliza para agregar sangría a la primera línea de un texto. Para utilizarlo, agregue el elemento Div con la clase "sangrar". Dentro de este div, agregue

etiqueta para el encabezado y

Etiqueta para agregar un párrafo.

Html

Propiedad CSS Text-Indent

El espacio de texto proporciona un aspecto muy ordenado al contenido escrito.
El texto debe romperse en trozos manejables.

Estilo "sangría" div Div

.sangría
Ancho: 350px;
Altura: 200px;
INDENT DE TEXTO: 40px;
margen: auto;
relleno: 5px;
Color de fondo: #FFC107;
Border: 10px Solid #9E9E9E;

La lista de propiedades CSS aplicadas a la sangría Div se explica a continuación:

• "anchoLa propiedad se utiliza para la configuración del ancho del elemento.
• "alturaLa propiedad se utiliza para establecer la altura del elemento.
• "guion de texto"La propiedad está establecida con el valor de"40px", Que representa un espacio de 40 px al comienzo de la primera línea de un párrafo.
• "margen"Propiedad con el valor establecido como"auto"Genera un espacio igual alrededor del elemento.
• "relleno"Propiedad con el valor"5px"Agregue el espacio de 5px alrededor del contenido del elemento.
• "color de fondo"La propiedad especifica el color de fondo del elemento.
• "borde"Propiedad con el valor establecido como"10px Solid #9E9E9E"Significa el ancho de la frontera, el estilo de borde y el color del borde.

Estilo "H2" de "sangría" div "

.sangría H2
Decoración de texto: 3px subraye gris;

El

Se aplica el elemento de encabezado de la sangría Div. "decoración de texto"Propiedad con el valor"3px subrayar gris" donde el "3px"Representa el ancho de la línea", "subrayar"Representa la línea debajo del texto y"gris"Es el color.

Producción

Ejemplo 2: Cómo agregar espacios blancos dentro del elemento?

El "CSS White-SpaceLa propiedad especifica los espacios blancos dentro del elemento particular. Esta propiedad se basa en los siguientes valores:

• normal
• nower
• pre-wrap
• pre
• pre-línea
• espacios de descanso

Html

En CSS, especifique la propiedad de White-Space con el valor "pre-línea":

Espacio blanco: pre-línea;

Producción

Ejemplo 3: Cómo agregar espacios entre las palabras?

El CSS "espacios de palabrasSe utiliza la propiedad para especificar los espacios entre el texto del elemento. Esta propiedad está asociada con los siguientes valores:

• longitud
• normal
• inicial
• heredar

Mira el ejemplo!

Entonces, en este ejemplo, agregaremos el "espacios de palabras"Propiedad con el valor"30px":

espaciado de palabras: 30px;

Producción

Ejemplo 4: Cómo agregar espacios entre líneas?

El "altura de la líneaSe utiliza la propiedad para especificar el espacio vertical entre las líneas de texto.

Aquí en este ejemplo, la propiedad Line-Weight se usa con el valor "3em":

Línea de altura: 3em;

Producción

Ejemplo 5: Cómo agregar espacios entre los caracteres de texto?

El CSS "espaciado de letrasSe utiliza la propiedad para agregar los espacios entre los caracteres de texto.

Aquí, el elemento se proporciona con la propiedad de espacios de letras con el valor de "-1px"En CSS:

espaciado de letras: -1px;

Producción

¿Qué son las propiedades de colocación de texto??

La colocación del texto se refiere a la alineación del texto. Significa la posición del texto como izquierda, derecha y muchos más, en relación con el punto de inserción del texto.

Cómo usar las propiedades de colocación de texto de CSS?

Las siguientes son las propiedades que se pueden utilizar para ajustar la ubicación del texto.

• alinear el texto
• texto alineado
• alinear vertical
• dirección
• unicode-bidi

Ejemplo 1: Cómo alinear la última línea del texto del elemento?

El CSS "alinear el textoSe utiliza la propiedad para ajustar la alineación de la última línea del texto. En nuestro caso, hemos establecido la propiedad de texto-align como "correcto":

Text-Align-LaT: Right;

Producción

Ejemplo 2: Cómo alinear el texto horizontalmente en HTML?

El CSS "texto alineadoLa propiedad se utiliza para alinear el texto horizontalmente. Por ejemplo, hemos establecido su valor como "bien":

Text-Align: Right;

Producción

Ejemplo 3: Cómo alinear el texto verticalmente en HTML?

El "alinear vertical"La propiedad del CSS se usa para alinear el texto verticalmente.

Para usar esta propiedad, agregue un "

Elemento para agregar un párrafo al documento deseado. Este párrafo consiste en los elementos en ciertos puntos con ID como "sobrescrito":

Alineación del texto proporciona el lectores con un visualmente
texto lógico.

En CSS, el elemento con ID "sobrescrito"Tiene el estilo con las siguientes propiedades:

#superscript
Color de fondo: RGB (3, 162, 11);
Align vertical: super;

Aquí:

• "color de fondoLa propiedad se utiliza para establecer el color de fondo del elemento.
• "alinear vertical" El valor de la propiedad "súper"Alineará el texto ligeramente verticalmente arriba.

Producción

Ejemplo 4: Cómo cambiar la dirección del texto?

El CSS "direcciónSe utiliza la propiedad para modificar la dirección del texto del elemento.

En CSS, la propiedad de dirección con el valor "RTL"Se especifica para hacer la dirección del elemento de derecha a izquierda:

Dirección: RTL;

Producción

Ejemplo 5: Cómo manejar el texto bidireccional en HTML?

Para manejar el texto bidireccional en un documento, el CSS "unicode-bidiSe utiliza la propiedad. El texto bidireccional se refiere al documento que tiene texto en ambas direcciones, derecha a izquierda y izquierda a derecha. El texto bidireccional generalmente existe en el documento que tiene varios idiomas, que se pueden establecer utilizando el "dirección" propiedad.

Para la demostración, agregue el siguiente código en el archivo CSS:

Dirección: RTL;
Unicode-bidi: bidi-supervide;

Aquí:

• "dirección"La propiedad se establece con el valor"RTL"Que indica la dirección derecha a izquierda del texto.
• "unicode-bidi"Propiedad con el valor establecido como"bidi-upride"Se usa para especificar si el texto proporcionado debe anularse para admitir varios idiomas en un documento.

Producción

Eso se trataba de ajustar el espacio y la colocación del texto en CSS.

Conclusión

Al escribir un documento, es muy necesario tener en cuenta el formato y el estilo del documento. Un documento bien formateado no produce ningún problema de legibilidad. Para hacerlo, CSS nos proporciona diferentes propiedades que ayudan en el espacio y la colocación del texto en HTML. Algunas de las propiedades son "texto alineado","dirección","alinear el texto", y más. Esta publicación ha demostrado varias propiedades de CSS que ayudan en la configuración de alineación y colocación de texto de los documentos HTML.