Una hoja de estilo en cascada (CSS) ofrece una propiedad para mostrar todos los elementos HTML sin ningún descanso, o puede decir que todos los contenidos HTML se muestran en una sola línea. HTML y CSS contribuyen a lograr este fenómeno en la página web. La ventaja básica de hacer esto es que el contenido HTML tomará menos espacio cuando se muestren. También hace que el contenido se alinee.

No hay ninguna característica incorporada en CSS como los otros efectos, por ejemplo, la decoración de texto, el tipo de estilo de lista, etc. Pero necesitamos aplicar este efecto de ruptura sin línea utilizando una propiedad de pantalla valorada como una propiedad de bloque en línea.

Para implementar el efecto de propiedad de interrupción de no línea CSS, debe conocer los conceptos básicos de HTML y CSS. Usaremos un editor de texto para el código y un navegador para implementar el código en el editor. Hagamos elaborar la propiedad CSS del bloqueo en línea y sus efectos en el fenómeno "No Break No Break".

Propiedad de bloque en línea CSS

Esta propiedad se utiliza para mostrar un elemento en el contenedor de bloque en línea. En este enfoque, el bloque de elementos se convierte en el elemento en línea. Al hacer esto, existe la prevención de la ruptura de la línea. La sintaxis de la propiedad de bloque en línea se muestra en lo siguiente:

Artículo
Pantalla: bloque en línea;

Implementaremos esta propiedad de dos maneras: a través de la lista y el DIV.

Ejemplo 1: No hay una rotura de línea en las listas

En el primer ejemplo, aplicaremos el concepto de descanso sin línea en la lista. Una lista es un contenido HTML donde el texto se representa verticalmente junto con las balas, ya sea la lista está ordenada o desordenada. Cuando hablamos de listas, siempre tenemos la vista de tener cada elemento de la lista en una línea separada con un descanso de línea. Pero a veces, según el escenario, queremos mostrar los elementos de la lista sin balas en una sola línea. Esto se hace mostrando los elementos de la lista utilizando el CSS con la propiedad "No Break No Break". Comencemos el código HTML con la sección del cuerpo.

Usamos dos encabezados del texto a través de las etiquetas de encabezado -

y

. Después de eso, la lista desordenada se crea con 5 elementos en cada fila.

• Red de computadoras


• …

Se sigue la misma sintaxis para que los 5 elementos se ingresen en cada fila.

Después de eso, el La etiqueta cierra la lista y también cierre de manera similar el resto de las etiquetas. Ahora, considere las etiquetas de estilo ya que necesitamos aplicar la propiedad de visualización en la lista para que cada elemento de la lista se muestre en una sola línea.

Li
Pantalla: bloque en línea;

Usamos la etiqueta "Li" directamente en el CSS para aplicar el efecto de bloque en línea en todos los elementos de la lista y evitamos que se muestren en una línea separada. Además, aplicamos el color de fuente a ambos encabezados. Este es un estilo adicional y no es obligatorio usar.

Para el estilo del cuerpo, usamos el color de fondo y el color de fuente colectivamente para agregar un estilo a la página web para que sea estética con los usuarios. Otra característica importante que se utiliza para aplicar la propiedad de visualización es mencionar el ancho del cuerpo HTML para mostrar todos los contenidos HTML en una sola línea.

Cuerpo
Ancho: 60%;

Guarde el código en el archivo del editor de texto con la extensión HTML para que sea un icono del navegador que represente que es una página web. Ejecutarlo en el navegador. La página web esperada tiene una lista de todos los elementos en una notación vertical si no hay una propiedad en línea de bloque.

Pero como resultado de esta propiedad CSS de pantalla, vemos que todos los elementos de la lista se muestran en una sola línea horizontal sin balas. Ya no parece una lista. Pero parece un párrafo simple con los espacios predeterminados entre las palabras.

Ejemplo 2: No se rompe la línea en Div

Al igual que las listas, cuando la lista se convierte en un párrafo, somos capaces de aplicar el efecto de visualización en cualquier otro contenido HTML. Entonces, hemos elegido un Div. Un div es el contenedor que contiene el otro contenido HTML dentro de él. Primero, considere una etiqueta DIV simple en la que no hemos aplicado ningún efecto CSS de "sin descanso de línea". Pero el DIV se suministra con sus estilos básicos como el acolchado y el color para mostrar la existencia de ambos divs en la página web.

Div uno

Lo mismo ocurre con los dos Div.

Guardar el código y ejecutarlo en el navegador. Verá que dos divs se muestran verticalmente con las especificaciones que aplicamos como un CSS en línea dentro de las etiquetas. Estos divs se muestran sin ningún descanso entre ellos. Como se ve en la salida, ambos divs están conectados.

Cada vez que se usa un div o una tabla en el HTML, ambos yacen uno tras otro en una dirección vertical como representamos. Esto se debe a que HTML genera el espaciado automático siguiendo el valor de relleno aplicado por el usuario para mantenerlos en una sola línea. Usando el fenómeno "sin descanso de línea", sometemos algunos cambios en el código.

Primero, aplicamos la propiedad de visualización con la propiedad de bloque en línea a ambos divs en CSS.

Div
Pantalla: bloque en línea;

Además, necesitamos reducir el ancho del cuerpo del HTML para que ambos DIV puedan ajustarse al tamaño dado del cuerpo.

Cuerpo
Ancho: 30%;

Tras la ejecución, verá que los dos divs que declaramos utilizaron la propiedad CSS "sin descanso de línea" de la pantalla.

Formas adicionales:

Alguna información adicional sobre la propiedad del "sin descanso de línea" se acompaña a través de las etiquetas HTML sin el uso de las etiquetas CSS por separado.

Una forma es usar la cadena  . El uso de esta cadena entre dos cadenas hace un espacio al hacer que permanezcan en la misma línea en lugar de usar un
etiqueta que conduce hacia la siguiente línea. El operador y (&) se utiliza para fines de enlace.

123  

Otra forma de una brecha entre dos cuerdas es que HTML utiliza una característica incorporada "NBSP" o el "espacio no roto". Usamos el NBSP entre dos números. Los resultados tendrán un espacio.

456

Ahora, tras la ejecución, verá el espacio entre estos tres números sin usar la ruptura de la línea.

Conclusión

El artículo de CSS "No Break Line Break" explica el uso de las propiedades de CSS y HTML que no sea el efecto de interrupción que se aplica a través de la etiqueta de descanso HTML
. Al principio, dimos una simple introducción sobre HTML y CSS. La propiedad que es responsable principalmente del efecto "sin descanso de línea" se explica como la propiedad de visualización de bloque en línea. Explicamos el uso de la pantalla en línea en las listas HTML y los contenedores DIV a través de ejemplos. Además, también se agrega información adicional sobre este tema.