Comment empêcher les ruptures de ligne dans les éléments de liste à l'aide de CSS

Dans HTML, les utilisateurs peuvent créer des listes dans l'ordre ainsi que des formulaires non ordonnés. Par défaut, il y a des ruptures de ligne entre les éléments dans une liste. Cependant, parfois, vous voudrez peut-être afficher les données de la liste en une seule ligne, comme affichée dans la barre de navigation. À cette fin, les développeurs sont tenus d'éviter les pauses de ligne entre les éléments de la liste.

Cet article démontrera:

• • Comment faire / créer une liste dans HTML?
  • Comment empêcher les ruptures de ligne dans les éléments de liste à l'aide de CSS?

Comment faire / créer une liste dans HTML?

Pour créer une liste dans HTML, essayez les instructions données.

Étape 1: Créez un conteneur «div»

Initialement, créez un conteneur Div à l'aide du «" étiqueter. Ajoutez également un "classe"Attribut et allouer un nom à l'attribut de classe en fonction de votre préférence.

Étape 2: faire une liste

Ensuite, utilisez le «

”Tag pour créer une liste non ordonnée et insérer le«
• ”Tag pour ajouter des données à la liste:

  
  

  
  
  • Thé
  
  
  • Café
  
  
  • Lait
  
  
  • jus
  
  
  • Boisson froide
  
  
  • menthe
  
  

  
  

  
  En conséquence, la liste a été créée avec succès:

  Comment empêcher les ruptures de ligne dans les éléments de liste à l'aide de CSS?

  Si vous souhaitez empêcher / supprimer les pauses de ligne des éléments de liste à l'aide de CSS, appliquez le «afficher«Propriété avec la valeur»bloc en ligne"Cela supprime les ruptures de ligne dans les éléments de la liste.

  Pour une démonstration pratique, consultez les étapes données.

  Étape 1: Conteneur de style «div»

  Pour styliser le conteneur, accédez d'abord à la classe en utilisant le nom de classe avec un sélecteur de points comme «.div". Ensuite, appliquez les propriétés CSS indiquées ci-dessous:

  .Div principal
  Border: 3px bleu massif;
  marge: 20px 100px;
  Color en arrière-plan: RVB (100, 193, 236);
  

  
  Ici:

  • • "frontière”Est ​​utilisé pour fixer la limite autour d'un élément.
    • "marge"Est utilisé pour spécifier l'espace à l'extérieur de la bordure.
    • "Couleur de l'arrière plan"Attribue une couleur à l'arrière de l'élément.

  Sortir

  
  Étape 2: Empêcher la rupture de ligne dans la liste

  Accédez à la liste avec l'aide de «

• »Et appliquez les propriétés CSS suivantes:

  li
  Affichage: bloc en ligne;
  débordement caché;
  Espace blanc: Nowrap;
  Text-overflow: ellipsis;
  

  
  Selon l'extrait de code donné:

  • • "afficher«La valeur de la propriété est définie comme«bloc en ligne«Pour empêcher les pauses de ligne.
    • "débordement"Est utilisé pour spécifier ce qui devrait se produire si le contenu se répand dans la boîte d'un élément. Cette propriété détermine s'il faut saisir du texte ou ajouter des barres de défilement lorsque le contenu d'un tel élément est long à définir dans une zone particulière.
    • "espace blanc"Est utilisé pour contrôler l'espace blanc et les pauses de ligne à l'intérieur du texte sont traitées.
    • "contre-flux"Est utilisé pour gérer les circonstances où le texte est coupé et déborde de la boîte de l'élément.

  Sortir

  
  Vous avez appris la méthode pour prévenir les ruptures de ligne dans les éléments de liste en utilisant les propriétés CSS.

  Conclusion

  Pour empêcher la rupture de ligne dans les éléments de liste à l'aide de CSS, créez d'abord une liste à l'aide du «

  »Tag et ajoutez des données en utilisant le«
  • " étiqueter. Ensuite, accédez à la liste et appliquez le «afficher" propriété. Ensuite, définissez la valeur "bloc en ligne"Cela supprime les ruptures de ligne dans les éléments de la liste. Cet article vous a appris la méthode la plus simple pour empêcher la rupture de ligne dans les éléments de liste à l'aide de CSS.