Un foglio di stile a cascata (CSS) offre una proprietà per visualizzare tutti gli elementi HTML senza alcuna interruzione, oppure puoi dire che tutti i contenuti HTML sono visualizzati su una singola riga. HTML e CSS contribuiscono entrambi a realizzare questo fenomeno sulla pagina web. Il vantaggio di base di farlo è che il contenuto di HTML impiegherà meno spazio quando vengono visualizzati. Rende anche allineato il contenuto.

Non esiste alcuna funzionalità integrata in CSS come gli altri effetti, ad esempio la decorazione del testo, il tipo di stile elenco, ecc. Ma dobbiamo applicare questo effetto di interruzione senza linea utilizzando una proprietà di visualizzazione valutata come una proprietà in linea.

Per implementare l'effetto della proprietà di interruzione senza linea CSS, è necessario conoscere le basi di HTML e CSS. Utilizzeremo un editor di testo per il codice e un browser per implementare il codice nell'editor. Elaboriamo la proprietà CSS del blocco in linea e i suoi effetti sul fenomeno "nessuna rottura della linea".

Proprietà in linea in linea CSS

Questa proprietà viene utilizzata per visualizzare un elemento nel contenitore in linea. In questo approccio, il blocco di elementi viene convertito nell'elemento in linea. In questo modo, c'è la prevenzione della rottura della linea. La sintassi della proprietà inline-block viene visualizzata nel seguente:

Articolo
display: blocco inline;

Implementeremo questa proprietà in due modi: attraverso l'elenco e il div.

Esempio 1: nessuna interruzione della riga negli elenchi

Nel primo esempio, applicheremo il concetto di interruzione senza linea nell'elenco. Un elenco è un contenuto HTML in cui il testo è rappresentato in verticale insieme ai proiettili, o non è ordinato l'elenco. Quando parliamo di elenchi, troviamo sempre la vista di avere ogni elemento dell'elenco in una linea separata con una rottura della linea. Ma a volte, secondo lo scenario, vogliamo visualizzare gli elementi dell'elenco senza proiettili in una sola riga. Questo viene fatto visualizzando gli elementi dell'elenco utilizzando il CSS con la proprietà "No Line Break". Iniziamo il codice HTML con la sezione del corpo.

Abbiamo usato due intestazioni del testo attraverso i tag di intestazione -

E

. Successivamente, l'elenco non ordinato viene creato con 5 elementi in ogni riga.

• Rete di computer


• ..

La stessa sintassi viene seguita per l'inserimento di 5 elementi in ogni riga.

Dopodiché, il Il tag chiude l'elenco e chiudi allo stesso modo anche il resto dei tag. Ora, considera i tag di stile in quanto dobbiamo applicare la proprietà di visualizzazione nell'elenco in modo che ogni elemento dell'elenco venga visualizzato su una singola riga.

Li
display: blocco inline;

Utilizziamo il tag "LI" direttamente nel CSS per applicare l'effetto blocco inline su tutti gli elementi dell'elenco e impedire loro di visualizzare su una linea separata. Inoltre, applichiamo il colore del carattere ad entrambe le intestazioni. Questo è uno stile aggiuntivo e non è obbligatorio da usare.

Per lo stile del corpo, utilizziamo collettivamente il colore di sfondo e il colore dei caratteri per aggiungere uno stile alla pagina web per renderlo estetico agli utenti. Un'altra caratteristica importante che viene utilizzata per applicare la proprietà del display è menzionare la larghezza del corpo HTML per visualizzare tutti i contenuti HTML in una singola riga.

Corpo
Larghezza: 60%;

Salva il codice nel file dell'editor di testo con l'estensione HTML per renderlo un'icona del browser che descrive che si tratta di una pagina web. Eseguilo nel browser. La pagina Web prevista ha un elenco di tutti gli elementi in una notazione verticale se non esiste una proprietà in linea.

Ma come risultato di questa proprietà del display CSS, vediamo che tutti gli elementi nell'elenco vengono visualizzati in una singola linea orizzontale senza proiettili. Non sembra più un elenco. Ma sembra un semplice paragrafo con gli spazi predefiniti tra le parole.

Esempio 2: nessuna linea si interrompe in div

Proprio come gli elenchi, quando l'elenco viene convertito in un paragrafo, siamo in grado di applicare l'effetto di visualizzazione su qualsiasi altro contenuto HTML. Quindi, abbiamo scelto un div. Un div è il contenitore che contiene l'altro contenuto HTML al suo interno. Innanzitutto, considera un semplice tag DIV in cui non abbiamo applicato alcun effetto CSS di "nessuna rottura della linea". Ma il Div è fornito con i suoi stili di base come imbottitura e colore per visualizzare l'esistenza di entrambi i div nella pagina web.

Div One

Lo stesso vale per il Div Two.

Salva il codice ed eseguilo nel browser. Vedrai che due div vengono visualizzati verticalmente con le specifiche che abbiamo applicato come CSS in linea all'interno dei tag. Questi div vengono visualizzati senza alcuna pausa tra di loro. Come visto nell'output, entrambi i div sono allegati.

Ogni volta che un div o una tabella viene utilizzato nell'HTML, entrambi giacevano uno dopo l'altro in una direzione verticale come rappresentavamo. Questo perché HTML genera la spaziatura automatica seguendo il valore di imbottitura applicato dall'utente per mantenerli in una singola riga. Usando il fenomeno "No Line Break", subiamo alcune modifiche al codice.

Innanzitutto, applichiamo la proprietà del display con la proprietà inline-block ad entrambi i div in CSS.

Div
Display: blocco inline;

Inoltre, dobbiamo ridurre la larghezza del corpo dell'HTML in modo che entrambi i Div possano adattarsi alla dimensione data del corpo.

Corpo
Larghezza: 30%;

Al momento dell'esecuzione, vedrai che i due div che abbiamo dichiarato hanno usato la proprietà CSS di "nessuna rottura".

Modi aggiuntivi:

Alcune ulteriori informazioni sulla proprietà della "nessuna rottura della linea" sono accompagnate attraverso i tag HTML senza l'uso dei tag CSS separatamente.

Un modo è usare la stringa e#160. L'uso di questa stringa tra due stringhe provoca uno spazio facendole rimanere sulla stessa linea invece di usare un
tag che conduce verso la seguente riga. L'operatore e (&) viene utilizzato per scopi di legame.

123 e#160

Un altro modo per un divario tra due stringhe è che HTML utilizza una caratteristica integrata "NBSP" o lo "spazio non di rottura". Usiamo l'NBSP tra due numeri. I risultati avranno uno spazio.

456

Ora, dopo l'esecuzione, vedrai lo spazio tra questi tre numeri senza usare la rottura della linea.

Conclusione

L'articolo CSS "No Line Break" spiega l'uso delle proprietà di CSS e HTML diverso dall'effetto di rottura che viene applicato tramite il tag di interruzione HTML
. All'inizio, abbiamo dato una semplice introduzione su HTML e CSS. La proprietà responsabile principalmente per l'effetto "nessuna rottura della linea" è spiegata come proprietà del display in linea. Abbiamo spiegato l'utilizzo del display in linea negli elenchi HTML e i contenitori Div attraverso esempi. Inoltre, vengono aggiunte anche alcune informazioni aggiuntive su questo argomento.