Cómo prevenir los descansos de línea en los elementos de la lista usando CSS

En HTML, los usuarios pueden crear listas en orden, así como formularios desordenados. Por defecto, hay saltos de línea entre elementos en una lista. Sin embargo, a veces, es posible que desee mostrar los datos de la lista en una línea, como se muestra en la barra de navegación. Para este propósito, se requiere que los desarrolladores eviten los descansos de línea entre los elementos de la lista.

Este artículo demostrará:

• • Cómo hacer/crear una lista en HTML?
  • Cómo prevenir los descansos de línea en los elementos de la lista usando CSS?

Cómo hacer/crear una lista en HTML?

Para crear una lista en HTML, pruebe las instrucciones dadas.

Paso 1: crear un contenedor "div"

Inicialmente, cree un contenedor Div con la ayuda del "" etiqueta. Además, agregue un "claseAtributo y asignar un nombre al atributo de clase de acuerdo con su preferencia.

Paso 2: Haz una lista

A continuación, utilice el "

"Etiqueta para crear una lista desordenada e insertar el"
• "Etiqueta para agregar datos a la lista:

  
  

  
  
  • Té
  
  
  • Café
  
  
  • Leche
  
  
  • jugo
  
  
  • Bebida fría
  
  
  • menta
  
  

  
  

  
  Como resultado, la lista se ha creado con éxito:

  Cómo prevenir los descansos de línea en los elementos de la lista usando CSS?

  Si desea prevenir/eliminar los descansos de línea de los elementos de la lista con CSS, aplique el "mostrar"Propiedad con el valor"bloqueo en línea"Eso elimina los descansos de línea en los elementos de la lista.

  Para una demostración práctica, consulte los pasos dados.

  Paso 1: Contenedor de estilo "Div"

  Para diseñar el contenedor, primero, acceda a la clase utilizando el nombre de clase con un selector de puntos como ".principal". Luego, aplique las propiedades de CSS declaradas:

  .principal-div
  borde: 3px azul sólido;
  margen: 20px 100px;
  Color de fondo: RGB (100, 193, 236);
  

  
  Aquí:

  • • "borde"Se utiliza para establecer el límite alrededor de un elemento.
    • "margen"Se usa para especificar el espacio fuera del borde.
    • "color de fondo"Asigna un color en la parte trasera del elemento.

  Producción

  
  Paso 2: Evite la ruptura de la línea en la lista

  Acceda a la lista con la ayuda de "

• ”Y aplique las siguientes propiedades de CSS:

  li
  Pantalla: bloque en línea;
  desbordamiento: oculto;
  White-Space: Nowrap;
  Texto-Overflow: Ellipsis;
  

  
  Según el fragmento de código dado:

  • • "mostrar"El valor de la propiedad se establece como"bloqueo en línea"Para prevenir los descansos de línea.
    • "Desbordamiento"Se utiliza para especificar qué debería suceder si el contenido se derrama desde el cuadro de un elemento. Esta propiedad determina si tomar texto o agregar barras de desplazamiento cuando el contenido de un elemento de este elemento es largo para establecerse en un área en particular.
    • "espacio blanco"Se utiliza para controlar el espacio blanco y las roturas de línea dentro del texto se tratan.
    • "texto de texto"Se usa para lidiar con las circunstancias cuando el texto se recorta y se desborda del cuadro del elemento.

  Producción

  
  Ha aprendido sobre el método para prevenir los descansos de línea en los elementos de la lista utilizando las propiedades de CSS.

  Conclusión

  Para evitar que la línea se rompa en los elementos de la lista con CSS, primero, cree una lista con la ayuda del "

  "Etiqueta y agregue datos utilizando el"
  • " etiqueta. Luego, acceda a la lista y aplique el "mostrar" propiedad. A continuación, establezca el valor "bloqueo en línea"Eso elimina los descansos de línea en los elementos de la lista. Este artículo le enseñó el método más fácil para prevenir la línea de ruptura en los elementos de la lista utilizando CSS.