Cómo forzar una línea de ruptura en una palabra larga en un div

Hay tablas y cuadros creados a través de DIV en documentos HTML que contienen información de texto dentro. El problema surge cuando hay una palabra grande con una gran cantidad de caracteres, y debido a esto, el texto fluye del contenedor descuidando el límite del contenedor.

Propiedad CSS Word-Wrap que formatea el texto escrito automáticamente dividiendo la palabra larga en partes cuando sea necesario. El "ajuste de líneaLa propiedad mueve las partes de la palabra a la siguiente línea de acuerdo con el tamaño del contenedor.

Forzando una ruptura de línea en una palabra larga en un Div

Simplemente agregue la propiedad Word-Wrap con el valor/atributo de palabra de ruptura en el elemento de estilo CSS que se refiere al Div.

Sintaxis
La sintaxis exacta para agregar la propiedad Word-Wrap es la siguiente:

Word-Wrap: Break-Word;

Problema: el contenido desborda el Div

Discutamos esto con la ayuda de un ejemplo simple de un divs que tiene el texto dentro con una palabra larga:

sin hacer una palabra:

El elemento de ruptura de línea en formatos HTML el texto escrito automáticamente rompiendo la palabra larga con muchos caracteres en partes cuando sea necesario. Por ejemplo, si hay un VEEEEEEEEEEEEEEEEERERRRRRRRRRRRRRRRRRYYYYYYYYYYYYY LARGO PALABRA

Esto mostrará el siguiente resultado en la salida. Esto parece muy problemático ya que el texto se está desbordando del DIV:

Solución: Agregar propiedad "Word-Wrap"

Ahora, si tomamos el mismo contenedor Div con el mismo texto adentro que se agregó anteriormente en esta publicación:

Con word-wrap: elemento de ruptura

El elemento de ruptura de línea en formatos HTML el texto escrito automáticamente rompiendo la palabra larga con muchos caracteres en partes cuando sea necesario. Por ejemplo, si hay un VEEEEEEEEEEEEEEEEERERRRRRRRRRRRRRRRRRYYYYYYYYYYYYY LARGO PALABRA

Ahora, en el elemento de estilo CSS, solo se requiere referirse a la clase DIV, ID o atributo en el que se ha escrito la palabra larga y problemática y luego simplemente agregue la propiedad Word-Wrap:

.clase 2
Word-Wrap: Break-Word;

Esta será la salida generada a través del fragmento de código anterior. Ahora, esto parece presentable porque la propiedad Word-Wrap dividió los caracteres de texto en múltiples líneas en lugar de desbordarse del contenedor:

Así es como podemos forzar una línea de ruptura en una palabra que tiene muchos personajes.

Conclusión

Para forzar una línea de ruptura en una palabra larga en un div de tal manera que mueva las partes de las palabras a las siguientes líneas de acuerdo con el tamaño del contenedor, hay una propiedad de envoltura de palabras CSS con la ruptura de la ruptura del valor. En el elemento de estilo CSS, solo se requiere agregar un selector para referirse al contenedor DIV en el que se crea la palabra y luego escribir la propiedad Word-Wrap.