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 » PHP Come aggiungere a un array in PHP? Gli array sono importanti per mantenere diversi tipi di dati in un unico posto. Segui questo articol... Piererminio De luca Golang Come usare le stringhe.Sostituisci la funzione in Golang - Esempi Le corde.La funzione Sostituisci () in Golang sostituisce tutte le occorrenze di una sottostringa al... Osea Martini Salesforce Salesforce Apex - Limiti del governatore Tutorial su quali sono i limiti del governatore e su come possono essere gestiti per diversi scenari... Piererminio De luca Pitone Panda al lattice Nick Marini c affilato Cos'è il sistema.Io Namespace in C# Sig. Valdo Marchetti html Come utilizzare la proprietà CSS Flex-Grow? Sarita Negri Oracle Linux Come installare Oracle SQL Developer su Windows? Sarita Negri AWS Cos'è la torre di controllo AWS e come usarla? Sarita Negri PHP Come utilizzare la funzione php strcmp Dr. Evita Damico Docker Quali sono i passaggi per distribuire un'immagine Nginx usando Docker? Sig. Valdo Marchetti Giava Come convertire una mappa in una stringa in Java? Domiziano Conte JavaScript Come TypeScript è diverso da JavaScript? Artemide Ricci Docker In che modo Docker differisce dal desktop Docker? Nestore Caruso