Envoltura de palabras css
En este tutorial, proporcionaremos una guía completa sobre esta propiedad de "Word-Wrap" y realizaremos ejemplos en los que utilizaremos la propiedad CSS "Word-Wrap".
Ejemplo 1:
Vamos a comenzar nuestro código y ejecutarlo en el código de Visual Studio. Comenzamos iniciando un nuevo archivo y luego seleccionamos HTML como idioma. Ahora, escriba "!"Y presione" Enter."Aquí encontrarás todas las etiquetas básicas HTML. Como resultado, no tendremos que agregar manualmente todas estas etiquetas. Después de todo esto, solo insertamos el nombre del archivo CSS en la etiqueta "Enlace" en la "Cabeza". Ponemos dos títulos en el cuerpo y creamos un div en el que escribimos una palabra larga para que usemos la propiedad "Word-Wrap" en CSS y le mostraremos cómo funciona.
Estamos decorando el encabezado aplicando el "color" y configurando el "rojo" utilizando la propiedad de "decoración de texto" y utilizando la palabra clave "subrayar" para esta propiedad. Aplicamos un estilo a este rumbo para hacerlo atractivo. También decoramos el segundo encabezado: "verde" como el "color" y aplicamos la "decoración de texto" y lo establece en "subrayar". Estamos estableciendo el "ancho" del "div" como "150px" y creando un "borde" a su alrededor. Este borde se trata de "3px" en su "ancho" y es un tipo "sólido", "rojo" en el "color".
Aquí, estamos aplicando la propiedad "Word-Wrap" y la configuramos en "Normal", que también es el valor "predeterminado". No romperá la palabra larga. La palabra larga aparecerá como está escrita en el código HTML. Cruce la frontera que hemos creado para el Div y el texto largo sigue siendo el mismo, no romperá esta palabra.
La salida muestra que la palabra larga parece igual que la escribimos en el archivo html. Cruza el límite y aparece en una línea. La palabra larga no se rompe aquí porque establece la propiedad "Word-Wrap" en "Normal", que es la misma que el "predeterminado".
Ejemplo # 2:
Estamos utilizando el mismo código HTML y ahora vamos a aplicar la palabra clave "de ruptura" como el valor de la propiedad "Word-Wrap" en este ejemplo.
El "color" para el encabezado 1 "H1", estamos utilizando "granate" y utiliza la "decoración de texto" para subrayar este encabezado. Para "H2" utilizamos "Purple" como el rumbo "H2" "Color" y "Subrayado" también. El "ancho" del contenedor "div" es "160px" y diseña un borde a su alrededor utilizando la propiedad "frontera". Establecemos "3px" para el borde del diver "ancho" del div, que es de la forma "sólida" y "granate" en el color. Aquí, está la propiedad "Word-Wrap" en la que usamos el valor de "Wright-Word". Este valor romperá la palabra larga de acuerdo con el espacio especificado. Miraremos la salida y sabremos cómo se rompe la palabra larga utilizando esta propiedad.
Observe cómo la palabra larga se rompe y se ajusta dentro del contenedor Div. Esta palabra larga se rompe en esta salida porque utilizamos el valor de "ruptura" para la propiedad "Word-wrap".
Ejemplo # 3:
Tenemos dos encabezados "H1" y "H2". Debajo de estos encabezados, tenemos dos divs diferentes con el nombre "A" y "B". Escribimos el texto dentro de ambos divs y ponemos una palabra larga en cada div. Ahora, estamos creando un archivo CSS en el que utilizaremos la propiedad "Word-Wrap".
Utilizamos la propiedad de "color" y la definimos como "verde" para decorar el encabezado, así como la propiedad de "decoración de texto" y la palabra clave "subrayar" para esta propiedad de "decoración de texto". También usamos "naranja" como "color" para el próximo encabezado e implementamos "decoración de texto" con "subrayado" como configuración. Establecimos el "ancho" del "div" como "180px", que establecerá este ancho para ambos divs porque no mencionamos el nombre de ningún div aquí. También utilizamos la propiedad "fronteriza" que también se aplica a ambos divs. El "ancho" del borde para ambos divs es "3px", tipo "sólido" y "azul" para el "color" del borde.
Mencionamos el nombre del primer div, que es "div. A "y luego se aplica el atributo" Word-Wrap ". El valor se establece en "normal", que también es el valor "predeterminado". La palabra larga no está rota para este div. La palabra larga se mostrará exactamente como se escribe en el código HTML. Ahora tenemos el segundo div que es "div. b". Para esto, estamos utilizando la propiedad "Word-Wrap" y se utiliza el valor de "Wort-Word". La palabra larga se romperá de acuerdo con el espacio provisto con este valor. Al aprovechar esta propiedad y valor, podremos ver cómo se divide la palabra larga en la salida.
La palabra larga del primer div no se rompe porque usamos "normal" como el valor de "word-wrap" para el "div. a". Pero en el segundo div, puedes ver que la palabra larga también se ajusta en el espacio especificado. Esta larga palabra que está presente dentro del segundo div se rompe. Esto se debe al uso de la propiedad de "Word-Word" de la propiedad "Word-Wrap".
Ejemplo # 4:
Creamos encabezados para este ejemplo y ponemos dos párrafos con los diferentes nombres de clase como "par" para el primer párrafo y "PAR1" para el segundo párrafo. También ponemos una palabra larga en ambos párrafos y usaremos la propiedad "Word-Wrap" en CSS.
El "color" del encabezado se establece en forma RGB. Su valor es "RGB (112, 6, 6)", que es un tono "granate". También usamos la familia de fuentes "argelina" para "H1". También establecemos la "familia de fuentes" de "H2" como "Times New Roman". El "color" de H2 es "Blue-Violet" y lo diseña como "cursiva" para que sea atractivo.
Ahora viene "par" que define el primer párrafo. El "ancho" que estamos definiendo aquí es "200px" y establecemos su "color de fondo" como "azul claro". También queremos crear el borde para esto, por lo que utilizamos "Border" y lo establecemos en "2px Solid Black". El "relleno" que estamos describiendo es "10px" y el tamaño del texto del párrafo es "20px" para "par". No usamos la propiedad "Word-Wrap" para este párrafo.
Después de esto, tenemos otro párrafo con el nombre "P1". Hemos definido el "ancho" como "11em" y el "color de fondo" como "azul claro". También necesitaremos un borde para esto, por lo que estamos utilizando el "borde" y configurándolo en "2px Solid Black."El" relleno "del que estamos hablando es" 10px ". Estamos utilizando la propiedad "Word-Wrap" y la establecemos en "Word Break" que hemos discutido en nuestros códigos anteriores y el tamaño del texto del párrafo es "20px" para "PAR1".
Aquí, la palabra larga del primer párrafo no se rompe porque no usamos la propiedad "Word-Wrap" para esto, se establece como predeterminado. Pero usamos la "Word-Wrap: Break-Word" para el segundo párrafo, por lo que se rompe la palabra larga del párrafo.
Conclusión:
El propósito de este tutorial es enseñarle cómo usar la propiedad de CSS "Word-Wrap". En este tutorial, hemos analizado la propiedad de CSS "Word-Wrap" y describimos qué es, cómo usarlo y cómo funciona. Hemos explicado que esta propiedad rompe la palabra larga y ajusta esta palabra larga en el espacio especificado. También hemos mostrado ejemplos de cómo usar esta propiedad "Word-Wrap", así como los resultados de todos los ejemplos.