Come prevenire le rotture di linea negli elementi elenchi utilizzando CSS

In HTML, gli utenti possono creare elenchi in ordine e moduli non ordinati. Per impostazione predefinita, ci sono interruzioni di linea tra elementi in un elenco. Tuttavia, a volte, potresti voler mostrare i dati dell'elenco in una riga, come visualizzati nella barra di navigazione. A tale scopo, gli sviluppatori sono tenuti a prevenire le interruzioni di linea tra gli elementi dell'elenco.

Questo articolo dimostrerà:

• • Come creare/creare un elenco in HTML?
  • Come prevenire le rotture di linea negli elementi elenchi utilizzando CSS?

Come creare/creare un elenco in HTML?

Per creare un elenco in HTML, prova le istruzioni fornite.

Passaggio 1: crea un contenitore "div"

Inizialmente, crea un contenitore div con l'aiuto di ""Tag. Inoltre, aggiungi un "classe"Attributo e allocare un nome all'attributo della classe in base alla tua preferenza.

Passaggio 2: fai un elenco

Successivamente, utilizza il “

"Tag per creare un elenco non ordinato e inserire il"
• "Tag per aggiungere dati all'elenco:

  
  

  
  
  • Tè
  
  
  • Caffè
  
  
  • Latte
  
  
  • succo
  
  
  • Bevanda fredda
  
  
  • menta
  
  

  
  

  
  Di conseguenza, l'elenco è stato creato correttamente:

  Come prevenire le rotture di linea negli elementi elenchi utilizzando CSS?

  Se si desidera impedire/rimuovere le interruzioni della linea dagli elementi dell'elenco utilizzando CSS, applica “Schermo"Proprietà con il valore"blocco inline"Ciò rimuove le interruzioni della linea negli elementi dell'elenco.

  Per una dimostrazione pratica, controlla i passaggi indicati.

  Passaggio 1: contenitore "div" stile

  Per modellare il contenitore, prima, accedi alla classe utilizzando il nome della classe con un selettore di punti come ".Main-Div". Quindi, applicare le proprietà CSS di seguito:

  .main-div
  bordo: 3px blu solido;
  Margine: 20px 100px;
  Background-color: RGB (100, 193, 236);
  

  
  Qui:

  • • "confine"È utilizzato per impostare il limite attorno a un elemento.
    • "margine"Viene utilizzato per specificare lo spazio al di fuori del bordo.
    • "colore di sfondo"Assegna un colore sul retro dell'elemento.

  Produzione

  
  Passaggio 2: prevenire la rottura della linea nell'elenco

  Accedi all'elenco con l'aiuto di "

• "E applica le seguenti proprietà CSS:

  li
  display: blocco inline;
  Overflow: nascosto;
  Spazio bianco: nowrap;
  text-overflow: ellipsis;
  

  
  Secondo lo snippet di codice dato:

  • • "Schermo"Il valore della proprietà è impostato come"blocco inline"Per prevenire le pause della linea.
    • "overflow"È utilizzato per specificare cosa dovrebbe accadere se il contenuto si riversa da una casella di elementi. Questa proprietà determina se afferrare il testo o aggiungere le barre di scorrimento quando il contenuto di tale elemento è lungo da impostare in una particolare area.
    • "spazio bianco"È utilizzato per il controllo dello spazio bianco e le interruzioni di linea all'interno del testo vengono trattate.
    • "text-overflow"Viene utilizzato per affrontare le circostanze quando il testo viene tagliato e trabocca dalla casella dell'elemento.

  Produzione

  
  Hai appreso il metodo per prevenire le interruzioni della linea negli elementi elencati utilizzando le proprietà CSS.

  Conclusione

  Per impedire la rottura della linea negli elementi elenchi utilizzando CSS, in primo luogo, crea un elenco con l'aiuto di "

  "Tag e aggiungi dati utilizzando"
  • "Tag. Quindi, accedi all'elenco e applica il "Schermo" proprietà. Successivamente, impostare il valore "blocco inline"Ciò rimuove le interruzioni della linea negli elementi dell'elenco. Questo articolo ti ha insegnato il metodo più semplice per prevenire l'interruzione della linea negli elementi di elenco utilizzando CSS.