Un foglio di stile a cascata è responsabile della fornitura di effetti e proprietà al contenuto di HTML. Il contenuto di base interessato è il testo attraverso proprietà diverse come il colore del carattere, la dimensione del carattere, sotto forma di intestazione, paragrafo o all'interno di qualsiasi altro contenitore. In questo articolo, discuteremo di una proprietà CSS del testo che si occupa del concetto che il testo non dovrebbe essere avvolto, il che significa che dovrebbe essere visualizzato così come è scritto nell'editor di testo.

Proprietà del testo avvolgente CSS

Questa proprietà CSS è una proprietà relativa al testo. La proprietà di allineamento del testo viene utilizzata qui per regolare il testo con l'allineamento all'interno di qualsiasi contenitore esterno o utilizzando una piccola area da visualizzare in modo indipendente. Permette alle parole lunghe o alle frasi di essere riparate in una particolare area o contenitore. Puoi anche dire che le parole lunghe sono suddivise in due o più porzioni in modo che possano essere avvolte nella riga successiva. Dobbiamo applicare tali tag per ridurre al minimo la possibilità di avvolgere il testo in modo che il testo si trovi su una singola riga. Tutti questi effetti vengono applicati in base ai requisiti.

Per realizzare il testo avvolgente o non la proprietà di avvolgimento, utilizzeremo una proprietà speciale CSS che è la proprietà dello spazio bianco.

Proprietà dello spazio bianco

Questa è la proprietà CSS che aiuta a controllare il modo in cui la proprietà CSS di linea e la proprietà dello spazio bianco vengono utilizzate in qualsiasi creazione e design della pagina web. Lo spazio bianco è l'area presente tra il contenuto di HTML interno e il confine del contenuto di HTML esterno. Questa proprietà determina come viene gestito o controllato l'area dello spazio bianco o l'area all'interno dell'elemento HTML.

A volte, lo spazio viene creato automaticamente. Dobbiamo rimuoverlo o, in altri casi, gli effetti speciali CSS vengono applicati per gestire lo spazio bianco all'interno dell'elemento. Esiste lo stesso approccio per applicare o rimuovere correttamente il testo di avvolgimento CSS.

La sintassi di base della proprietà avvolgente è:

Spazio bianco: normale | nowrap | pre | pre-wrap | pre-line;

Il valore può essere uno dei valori precedentemente forniti che vengono assegnati alla proprietà dello spazio bianco. Se la proprietà dello spazio bianco è fornita dal valore normale, ciò significa che lo spazio bianco attorno al testo è secondo il grafico standard della normalità. Il pre-wrap provoca lo spazio bianco del lato sinistro all'interno dell'elemento. Questo spazio è tra il testo e l'elemento esterno, quindi il lato sinistro dell'elemento avrà più spazio con il testo "pre" che ha lo spazio generale prima del testo. La pre-line provoca un divario di linea tra il testo e il limite dell'elemento esterno.

Se non vogliamo avvolgere il testo, la proprietà dello spazio bianco non è necessaria per essere applicata prima. Ma se l'involucro del testo è già eseguito e dobbiamo rimuoverlo, utilizziamo il valore "nowrap" a questa proprietà.

Implementeremo questo fenomeno nei seguenti esempi:

Esempio 1: non avvolgere il testo con le tabelle HTML

In questo esempio, gestiremo la proprietà dello spazio bianco nel contenuto della tabella. Una tabella è un contenitore HTML che trasporta il testo e altri contenuti al suo interno. La tabella differisce dal contenitore div poiché ha righe e colonne. Una tabella ha ulteriormente due tipi di tag: il tag della testa e il tag del corpo. La parte della testa contiene le righe della tabella e la parte del corpo contiene anche le righe della tabella per aggiungere i dati della tabella. Considerando che i dati HTML vengono inseriti nella tabella sotto forma di righe ciascuna all'interno del tag di intestazione del corpo e contiene solo le letture.

Nell'esempio, la tabella viene applicata con la proprietà del bordo che è 1 crollo.

prima riga

Questo bordo impedisce alle celle del tavolo di essere avvolte. IL

E etichetta. Questa sezione contiene i valori relativi all'intestazione. Tutte le ulteriori righe vengono inserite nella sezione del corpo. Noi usiamo il Tag per i dati all'interno delle righe della tabella. Chiudi tutti i tag e salvali.

Dopo il codice corporeo HTML, ora usiamo il corpo CSS per aggiungere gli effetti della spaziatura bianca. Non è necessario applicare il CSS interno in quanto useremo direttamente il

vengono utilizzati per aggiungere gli elementi nella tabella. Chiudi il tag. Queste righe contengono l'intestazione del tavolo. Ora, usa il corpo
dentro il
tag come il E tag. All'interno del tag di stile, il "th" è applicato dall'effetto spazio bianco. Visualizziamo il testo all'interno come una frase intera su una singola riga, quindi usiamo la proprietà "NowRap". Ora, salva il codice nell'estensione HTML. Eseguire il file nel browser per vedere il valore risultante. Al momento dell'esecuzione, vedrai che una tabella viene creata con l'intestazione dichiarata sulla singola riga, sebbene sia abbastanza lungo da avvalersi della proprietà dello spazio bianco CSS. Esempio 2: non avvolgere il testo con il paragrafo Un altro esempio che abbiamo usato qui è il paragrafo. Questi due paragrafi contengono una sola parola di più lettere. Se nel paragrafo viene utilizzata una frase, è facile rompere la frase in atto tra le parole. Ma una sola parola con numerosi caratteri senza spazio è difficile da tenere senza avvolgere il testo. Il secondo paragrafo viene applicato con l'ID CSS. Questo ID è dichiarato nella sezione principale, creando il CSS interno. Entrambi i paragrafi hanno una sola parola con numerose lettere. Ora, considera il CSS di questo codice. Innanzitutto, l'intero corpo viene applicato con un effetto di imbottitura e una dimensione del carattere. Il paragrafo viene applicato con valore di margine automatico. Questo valore è la distanza tra il contenuto interno e la casella esterna. Abbiamo anche aggiunto la proprietà di imbottitura ad entrambi i paragrafi. La distanza tra il paragrafo e il bordo viene calcolata attraverso questo valore di imbottitura. L'ID overflow contiene la proprietà Wrap e fornisce il valore per rompere le parole in modo che il testo possa adattarsi all'interno del bordo. #overflow Overflow-Wrap: Break-Word; Al momento dell'esecuzione, vedrai che il paragrafo in cui non abbiamo applicato alcuna classe per lo spazio bianco ha superato il limite che abbiamo avviato. Mentre il secondo paragrafo è limitato su dove abbiamo applicato l'effetto di overflow-wrap per rompere la parola. Conclusione Questo articolo è utile quando dobbiamo comprendere il concetto di spazio bianco nel contenuto HTML. Se vogliamo aggiungere questo spazio bianco nel valore del contenuto HTML, in particolare nel testo, il testo verrà suddiviso in parole separate e utilizzerà due o più frasi. Ma se non vogliamo avvolgere il testo con la proprietà CSS White-Space, il testo verrà visualizzato in una singola riga senza una pausa di parole. Abbiamo usato due esempi per elaborare la proprietà CSS "Non avvolgere il testo" con la tabella e il paragrafo. « Segno CSS Plus Funzione netlink 7 c » JavaScript Come controllare la versione dattiloscritto Per controllare la versione di TypeScript, utilizzare i comandi TSC -V o TSC -VERSION sul prompt dei... Sig. Valdo Marchetti Powershell Come utilizzare il cmdlet write-output in PowerShell? Il write-output di cmdlet viene utilizzato per la scrittura di oggetti nella pipeline. In primo luog... Dr. Evita Damico AWS Perché dovrei usare le organizzazioni AWS? Le organizzazioni AWS possono gestire molti account sul cloud per aiutare le aziende che stanno aume... Cristyn De Santis Pitone Python chiama il metodo statico all'interno della classe Osea Martini Pitone Python scrivi stringa su file Cristyn De Santis Pitone Python Count personaggi nella stringa Nunzia Martini Docker Qual è lo scopo di una doccia.File YML in Docker? Artemide Ricci PHP Come utilizzare la funzione Array_Reverse in PHP Dr. Evita Damico PHP Come utilizzare la funzione delle strisce in PHP Piererminio De luca Oracle Database Cos'è Oracle SQL*Plus e a cosa serve? Nestore Caruso Oracle Linux Quali sono le differenze tra Oracle Linux e Ubuntu Linux? Domiziano Conte JavaScript Come TypeScript è diverso da JavaScript? Artemide Ricci Docker Come posso elencare tutti i comandi Docker? Sig. Valdo Marchetti