Una hoja de estilo en cascada es responsable de proporcionar los efectos y propiedades a los contenidos HTML. El contenido básico que se ve afectado es el texto a través de diferentes propiedades como el color de la fuente, el tamaño de la fuente, en forma de encabezado, párrafo o dentro de cualquier otro contenedor. En este artículo, discutiremos una propiedad CSS del texto que trata sobre el concepto de que el texto no debe envolverse, lo que significa que debe mostrarse tal como está escrito en el Editor de texto.

Propiedad de texto de envoltura CSS

Esta propiedad CSS es una propiedad relacionada con el texto. La propiedad de alineación del texto se usa aquí para ajustar el texto con la alineación dentro de cualquier contenedor externo o utilizando un área pequeña para mostrar de forma independiente. Permite que las palabras o oraciones largas se fijen en un área o contenedor en particular. También puede decir que las palabras largas se dividen en dos o más porciones para que puedan envolverse en la siguiente línea. Necesitamos aplicar tales etiquetas para minimizar las posibilidades de envolver el texto para que el texto se encuentre en una sola línea. Todos estos efectos se aplican de acuerdo con los requisitos.

Para lograr el texto de envoltura o no la propiedad de envoltura, utilizaremos una propiedad CSS especial que es la propiedad de White-Space.

Propiedad de espacio blanco

Esta es la propiedad CSS que ayuda a controlar cómo se utilizan la propiedad CSS de línea de línea y la propiedad de White-Space en cualquier creación y diseño de la página web. White-Space es el área que está presente entre el contenido HTML interno y el límite del contenido HTML externo. Esta propiedad determina cómo se maneja o controla el espacio blanco o el área dentro del elemento HTML.

A veces, el espacio se crea automáticamente. Necesitamos eliminarlo, o en otros casos, los efectos CSS especiales se aplican para administrar el espacio blanco dentro del elemento. Existe el mismo enfoque para aplicar o eliminar el texto de envoltura CSS correctamente.

La sintaxis básica de la propiedad WRAP es:

White-Space: Normal | Nowrap | Pre | Pre-Wrap | Pre-línea;

El valor puede ser cualquiera de los valores dados anteriormente que se dan a la propiedad de White-Space. Si el valor normal proporciona la propiedad del espacio blanco, esto significa que el espacio blanco alrededor del texto está de acuerdo con el gráfico estándar de normalidad. El pre-wrap causa el espacio blanco del lado izquierdo dentro del elemento. Este espacio está entre el texto y el elemento exterior, por lo que el lado izquierdo del elemento tendrá más espacio con el texto "pre" que tiene el espacio general antes del texto. La pre-línea provoca un espacio de línea entre el texto y el límite del elemento exterior.

Si no queremos envolver el texto, la propiedad de White-Space no es necesaria para aplicarse primero. Pero si el envoltorio de texto ya está hecho y necesitamos eliminarlo, usamos el valor "Nowrap" en esta propiedad.

Implementaremos este fenómeno en los siguientes ejemplos:

Ejemplo 1: No envuelva el texto con tablas HTML

En este ejemplo, manejaremos la propiedad del espacio blanco en el contenido de la tabla. Una tabla es un contenedor HTML que lleva el texto y otros contenidos dentro de él. La tabla difiere del contenedor Div ya que tiene filas y columnas. Una tabla tiene dos tipos de etiquetas más allá: la etiqueta de la cabeza y la etiqueta del cuerpo. La parte del cabezal contiene las filas de la tabla y la parte del cuerpo también contiene las filas de la tabla para agregar los datos de la tabla. Mientras que los datos HTML se ingresan en la tabla en forma de filas cada una dentro de la etiqueta de encabezado del cuerpo y el contiene solo las lecturas.

En el ejemplo, la tabla se aplica con la propiedad fronteriza que es 1 colapso.

primera fila

Este borde evita que las células de la tabla se envuelvan. El

y etiqueta. Esta sección contiene los valores con respecto al encabezado. Todas las filas adicionales se ingresan en la sección del cuerpo. Usamos el Etiqueta para los datos dentro de las filas de la tabla. Cierre todas las etiquetas y guárdelas.

Después del código corporal HTML, ahora usamos el cuerpo CSS para agregar los efectos del espacio blanco. No es necesario aplicar el CSS interno, ya que usaremos directamente el

se usan para agregar los elementos en la mesa. Cierre la etiqueta. Estas filas contienen el encabezado de la mesa. Ahora, usa el cuerpo
dentro de
etiqueta como el y etiquetas. Dentro de la etiqueta de estilo, el "th" se aplica por el efecto de espacio blanco. Mostramos el texto dentro como una oración completa en una sola línea, por lo que usamos la propiedad "Nowrap". Ahora, guarde el código en la extensión HTML. Ejecutar el archivo en el navegador para ver el valor resultante. Tras la ejecución, verá que se crea una tabla con el encabezado que se declara en la línea única, aunque es lo suficientemente largo como para aprovechar la propiedad del espacio blanco CSS. Ejemplo 2: No envuelva el texto con el párrafo Otro ejemplo que usamos aquí es el párrafo. Estos dos párrafos contienen una sola palabra de varias letras. Si se usa una oración en el párrafo, es fácil romper la oración en su lugar entre las palabras. Pero una sola palabra con numerosos caracteres sin espacio es difícil de sostener sin envolver el texto. El segundo párrafo se aplica con el ID de CSS. Esta identificación se declara en la sección principal, haciendo el CSS interno. Ambos párrafos tienen una sola palabra con numerosas letras. Ahora, considere el CSS de este código. Primero, todo el cuerpo se aplica con un efecto de relleno y un tamaño de fuente. El párrafo se aplica con valor de margen automático. Este valor es la distancia entre el contenido interno y el cuadro exterior. También agregamos la propiedad de relleno a ambos párrafos. La distancia entre el párrafo y el borde se calcula a través de este valor de relleno. La ID de desbordamiento contiene la propiedad de envoltura de texto y le da el valor para romper las palabras para que el texto pueda caber dentro del borde. #Desbordamiento Overflow-Wrap: Break-Word; Tras la ejecución, verá que el párrafo en el que no hemos aplicado ninguna clase para el espacio en blanco excedió el límite que iniciamos. Mientras que el segundo párrafo está limitado sobre dónde aplicamos el efecto de envoltura de desbordamiento para romper la palabra. Conclusión Este artículo es útil cuando necesitamos comprender el concepto de espacio blanco en el contenido HTML. Si queremos agregar este espacio blanco en el valor de contenido HTML, específicamente en el texto, el texto se dividirá en palabras separadas y utilizará dos o más oraciones. Pero si no queremos envolver el texto con la propiedad CSS White-Space, el texto se mostrará en una sola línea sin un descanso de palabras. Utilizamos dos ejemplos para elaborar la propiedad CSS "No envuelva texto" con la tabla y el párrafo. « CSS Plus Sign Función NetLink 7 C » AWS ¿Cuáles son las funciones del paso de AWS y cómo usarlas?? Las funciones del paso de AWS se crean para realizar tareas secuenciadas y proporcionar la interfaz ... Salvador Anaya C ++ Diferencia entre privado y protegido en c ++ El especificador de acceso privado limita la visibilidad de los miembros de la clase solo a la clase... Jacobo Piña Sqlite ¿Puedo usar sqlite en línea?? Sí, puede usar SQLite en línea a través de la aplicación web SQLite Viewer, la clase Extend o el Vis... Lorenzo Morales Pitón TSPLOT SEABOR Beatriz Enríquez php Cómo buscar la lista de zonas horarias de PHP Salvador Anaya OS de Windows Cómo encender el escritorio remoto en la PC Pilar Alemán AWS ¿Cuál es la diferencia entre AWS Batch y Lambda?? Mayte Mesa Potencia Shell Cómo usar operadores de comparación en PowerShell? Mariana Cotto Java Cómo contar el número de palabras en una cadena usando Java? Jacobo Piña AWS Cómo usar AWS Systems Manager Manager de sesión? Salvador Anaya AWS ¿Cuál es la diferencia entre AWS Aurora y MySQL?? Andrés Barrientos Potencia Shell Cómo usar el comando set-variable en PowerShell Lorenzo Morales AWS ¿Qué es una instancia y cómo usarlo en EC2?? Carolina Guzmán