Envoltura de desbordamiento de CSS

El atributo Overflow-Wrap en CSS permite a los usuarios decirle al navegador que de alguna manera una pieza de contenido dentro del componente especificado se puede dividir en numerosas líneas en una ubicación indestructible normalmente indestructible. Esto evita que una cadena de texto muy larga produzca problemas de diseño debido a la desbordamiento. Esta propiedad se puede aplicar a elementos en línea y se puede usar en una hoja de estilo externo, un estilo de contorno y un estilo en línea de cualquier archivo HTML. En esta guía, lo ayudaremos a comprender el uso de la propiedad de envoltura de desbordamiento del estilo CSS en HTML para diseñar las secciones "Div" utilizando diferentes estilos de envoltura. Para este propósito, le sugerimos que use el código Visual Studio para scripts HTML.

Ejemplo 01: envoltura normal

En nuestro primer ejemplo, discutiremos el uso de una envoltura normal con diferentes estilos de escritura. Por lo tanto, hemos estado utilizando el código Visual Studio para crear un nuevo archivo HTML llamado "Prueba.html ”y comience el script html dentro de él. El código HTML se ha iniciado con la etiqueta HTML principal seguida de la cabeza principal y las etiquetas del cuerpo. Dentro de la etiqueta del cuerpo, hemos estado usando los dos primeros encabezados de diferentes tamaños. El encabezado 1 es el más grande, mientras que se dirige 2 es el segundo más grande que muestra que esta sería una envoltura normal.

Después de este encabezado, hemos estado utilizando la etiqueta "div" para crear una nueva sección dentro de la página web HTML principal. Esta etiqueta "div" se ha especificado con la clase "D1" para diferenciarse al estilo. Hemos agregado una línea de texto o párrafo para envolverla en un estilo de envoltura normal. Este texto es simple y no contiene palabras largas en él. Después de esta etiqueta "Div", hemos estado utilizando el segundo encabezado de esta página HTML para mostrar que el próximo texto Div también contendrá una envoltura normal. Luego, tenemos una nueva etiqueta "Div" especificada por la clase "D2" para la diferenciación en el estilo.

Esta sección "Div" contiene un texto o párrafo largo junto con una palabra larga para que podamos ver cómo reacciona una propiedad y el estilo normal. Después de esta sección, el cuerpo se ha completado y la etiqueta del cuerpo se cerrará junto con la etiqueta principal "HTML". Dentro de la etiqueta "Cabeza" de este código HTML, tenemos una etiqueta de estilo para peinar la página HTML. La palabra clave "div" se ha utilizado para diseñar tanto las secciones "div" a 100 píxeles con el borde de 3 píxeles de color "Violeta azul" para cada uno. El ancho y la propiedad fronteriza se han utilizado aquí para este propósito. Después de eso, ambas secciones DIV se han diseñado por separado con el uso de su clase. Envolvemos ambos en la envoltura normal usando la propiedad "Overflow-Wrap". El estilo se ha completado. Entonces, el estilo y la etiqueta de la cabeza están cerrados aquí. Nuestro script HTML se ha completado y está listo para su uso. Por lo tanto, lo hemos guardado e intentamos ejecutarlo en el código VS.

Hemos estado utilizando el menú "Ejecutar" desde el código de Visual Studio seguido de la opción "Iniciar depuración". Ha pedido seleccionar el navegador Chrome de la lista. Lo hemos ejecutado y tenemos la salida de Below Shows para dos secciones "Div" que contienen una envoltura normal en su texto. La primera sección "Div" ha estado mostrando su texto en un formato ordenado y normal porque no contiene una palabra muy larga que no se puede instalar en el ancho de 100 píxeles.

Por otro lado, el segundo cuadro "Div" contiene una palabra muy larga en su texto. Por lo tanto, la salida muestra que la palabra cruzó el borde del cuadro "div" de 100 píxeles como el uso de una envoltura normal. Esto se debe a que Normal Wrap no rompe la palabra para que se ajuste en la sección "Div".

Ejemplo 02: Break-Word Wrap

En este ejemplo, discutiremos el uso de la envoltura de las palabras de ruptura en comparación con la envoltura normal. Entonces, hemos estado utilizando el mismo código HTML en la herramienta de código de Visual Studio pero con pocas actualizaciones. Entonces, comenzaremos su explicación de la etiqueta "cuerpo". Hemos actualizado los datos de texto de etiquetas "div" con la oración larga que contiene una palabra larga en él. El encabezado 1 se indicaría como una envoltura normal, mientras que el otro encabezado de tamaño 1 se establece como una envoltura de "volcada".

Hemos actualizado el texto de la sección "Div" para ambas secciones "Div" por separado. El cuerpo ahora está completo y estaremos mirando el estilo. Se han utilizado el mismo ancho y propiedad fronteriza tanto para las secciones "div" como para sus clases para su estilo separado. Hemos estado especificando una envoltura normal para la primera sección "Div", mientras que la envoltura de la "palabra de ruptura" para la segunda sección "div". Hemos guardado este código.

Después de ejecutar este código actualizado en el navegador, tenemos la salida de Below Shows. El primer texto de la sección "Div" es cruzar su borde sin romper una palabra, mientras que el otro texto de la sección "Div" tiene una palabra larga que se ha roto y se ha movido a la siguiente línea para encajar en el panel "Div". Esto se hace mediante el uso de la envoltura de la palabra para el estilo.

Ejemplo 03: en cualquier lugar envolver

En este ejemplo, explicaremos el uso de la propiedad Overflow-Wrap para aplicar la envoltura "en cualquier lugar" en nuestros "datos" y lo compararemos con la envoltura de la palabra de interrupción. Entonces, dentro de la etiqueta del cuerpo de nuestro código HTML, hemos actualizado sus encabezados. El primer encabezado de tamaño 1 se ha declarado como una reducción de la palabra ", mientras que el segundo rumbo del mismo tamaño se establece como" envoltura en cualquier lugar ". Ambas etiquetas "Div" contienen el texto de la oración larga actualizada que contiene al menos 1 palabra larga en ella. Ambas oraciones en las etiquetas "Div" se actualizan por separado para la break-word y en cualquier lugar por separado por separado.

Dentro de la etiqueta de estilo, hemos vuelto a usar el ancho de 100 píxeles para ambas etiquetas que contienen el borde del color sólido de "violeta azul". Después de esto, hemos estado usando las clases de ambas etiquetas por separado para diseñarlas en consecuencia: D1 y D2. La propiedad Overflow-Wrap se ha utilizado para "Div" por separado al estilo First Div con una envoltura "Break-Word" y Second "Div" con la envoltura "en cualquier lugar". Guardemos y ejecutemos este código ahora.

La salida de este código actualizado no ha demostrado un cambio menor en el estilo de las dos secciones "Div". Break-word y cualquier lugar es lo mismo.

Conclusión

Se trata del estilo de diferentes elementos de un archivo HTML con la propiedad "Overflow-Wrap" para evitar el desbordamiento de diferentes textos de cadena de cualquier tipo de elemento en las páginas web HTML. Hemos visto tres ejemplos HTML muy simples pero útiles que cubren por separado la envoltura normal, la envoltura de la palabra de interrupción y la envoltura de cualquier lugar. Junto con eso, también hemos cubierto sus comparaciones.