Avvolgimento delle parole CSS
In questo tutorial, forniremo una guida completa su questa proprietà "Word-Wrap" e eseguiremo esempi in cui useremo la proprietà CSS "Word-Wrap".
Esempio 1:
Inizieremo il nostro codice e lo eseguiremo nel codice Visual Studio. Iniziamo lanciando un nuovo file e quindi selezioniamo HTML come lingua. Ora, tipo "!”E premere“ Inserisci."Qui troverai tutti i tag di base HTML. Di conseguenza, non dovremo aggiungere manualmente tutti questi tag. Dopo tutto ciò, inseriamo il nome del file CSS nel tag "Link" nella "testa". Mettiamo due titoli nel corpo e creiamo un div in cui scriviamo una lunga parola in modo da usare la proprietà "word-wrap" in CSS e ti mostreremo come funziona.
Stiamo decorando l'intestazione applicando "colore" e impostandola sulla proprietà "rossa" utilizzando la proprietà "decorazione del testo" e utilizzando la parola chiave "sottolineare" per questa proprietà. Applichiamo lo stile a questa intestazione per renderlo attraente. Decoriamo anche la seconda intestazione: "verde" come "colore" e applichiamo la "decorazione del testo" e la imposti su "sottolinearsi". Stiamo impostando la "larghezza" del "div" come "150px" e creando un "bordo" attorno ad esso. Questo bordo è circa "3px" nella sua "larghezza" ed è un tipo "solido", "rosso" nel "colore".
Qui, stiamo applicando la proprietà "word-wrap" e la stacciamo su "normale" che è anche il valore "predefinito". Non romperà la lunga parola. La parola lunga apparirà come è scritta nel codice HTML. Attraverserà il bordo che abbiamo creato per il div e il testo lungo rimane lo stesso, non romperà questa parola.
L'output mostra che la parola lunga appare uguale a quando la scriviamo nel file html. Attraversa il confine e appare in una riga. La parola lunga non è rotta qui perché imposta la proprietà "word-wrap" su "normale", che è la stessa del "predefinito".
Esempio n. 2:
Stiamo usando lo stesso codice HTML e ora applicheremo la parola chiave "pausa" come il valore della proprietà "word-wrap" in questo esempio.
Il "colore" per l'intestazione 1 "H1", stiamo utilizzando "Maroon" e utilizza la "delerazione del testo" per sottolineare questa intestazione. Per "H2" utilizziamo anche "Purple" come tenatura "H2" "Colore" e "Underline". La "larghezza" del contenitore "div" è "160px" e progetta un bordo attorno a esso utilizzando la proprietà "bordo". Abbiamo impostato "3px" per la "larghezza" di confine del Div che è della forma "solida" e "marrone" nel colore. Qui, è la proprietà "word-wrap" in cui utilizziamo il valore "pausa". Questo valore romperà la parola lunga in base allo spazio specificato. Esamineremo l'output e sapremo come la parola lunga si rompe utilizzando questa proprietà.
Notare come la parola lunga viene rotta e regolata all'interno del contenitore. Questa lunga parola è rotta in questo output perché utilizziamo il valore "pausa" per la proprietà "word-wrap".
Esempio # 3:
Abbiamo due titoli "H1" e "H2". Sotto questi titoli, abbiamo due div diversi con il nome "A" e "B". Scriviamo il testo all'interno di entrambi i div e mettiamo una lunga parola in ogni div. Ora stiamo creando un file CSS in cui utilizzeremo la proprietà "word-wrap".
Usiamo la proprietà "Color" e la definiamo come "verde" per decorare la proprietà di intestazione, nonché la proprietà di "decorazione del testo" e la parola chiave "sottolinearsi" per questa proprietà "decorazione del testo". Usiamo anche "arancione" come "colore" per l'intestazione successiva e implementiamo "delerazione del testo" con "sottolineatura" come impostazione. Abbiamo impostato la "larghezza" del "div" come "180px", che imposterà questa larghezza per entrambe le div perché non menzioniamo il nome di qualsiasi div qui. Utilizziamo anche la proprietà "bordo" che si applica anche ad entrambi i div. La "larghezza" del bordo per entrambe le div è "3px", tipo "solido" e "blu" è impostato per il "colore" del bordo.
Citiamo il nome del primo div che è "div. A "e quindi viene applicato l'attributo" word-wrap ". Il valore è impostato su "normale" che è anche il valore "predefinito". La parola lunga non è rotta per questo div. La parola lunga verrà visualizzata esattamente come è digitata nel codice HTML. Ora abbiamo il secondo div che è "div. B". Per questo, stiamo utilizzando la proprietà "word-wrap" e viene utilizzato il valore "pausa". La parola lunga verrà spezzata in base allo spazio fornito con questo valore. Sfruttando questa proprietà e questo valore, saremo in grado di vedere come la parola lunga si divide nell'output.
La lunga parola del primo div non è rotta perché usiamo "normale" come valore di "word-wrap" per il "div. UN". Ma nel secondo div, puoi vedere che anche la parola lunga è regolata nello spazio specificato. Questa lunga parola che è presente all'interno del secondo div è rotta. Ciò è dovuto all'uso del valore di "pausa" della proprietà "word-wrap".
Esempio # 4:
Creiamo titoli per questo esempio e mettiamo due paragrafi con i diversi nomi delle classi come "par" per il primo paragrafo e "par1" per il secondo paragrafo. Abbiamo anche messo una lunga parola in entrambi i paragrafi e useremo la proprietà "word-wrap" in CSS.
Il "colore" dell'intestazione è impostato in forma RGB. Il suo valore è "RGB (112, 6, 6)", che è un'ombra "marrone". Usiamo anche la famiglia di carattere "algerina" per "H1". Abbiamo anche impostato la "famiglia del carattere" di "H2" come "Times New Roman". Il "colore" di H2 è "blu-viola" e lo modella come "corsivo" per renderlo attraente.
Ora arriva "par" che definisce il primo paragrafo. La "larghezza" che stiamo definendo qui è "200px" e abbiamo impostato il suo "colore di sfondo" come "blu chiaro". Vogliamo anche creare il bordo per questo, quindi utilizziamo il "bordo" e lo impostiamo su "2px Solid Black". La "imbottitura" che stiamo descrivendo è "10px" e la dimensione del testo del paragrafo è "20px" per "par". Non usiamo la proprietà "Word-Wrap" per questo paragrafo.
Dopo questo, abbiamo un altro paragrafo con il nome "P1". Abbiamo definito la "larghezza" come "11em" e il "colore di sfondo" come "blu luce". Avremo anche bisogno di un bordo per questo, quindi stiamo usando il "bordo" e configurandolo su "2px Solid Black."La" imbottitura "di cui stiamo parlando è" 10px ". Stiamo utilizzando la proprietà "Word-Wrap" e la impostamo su "Word-Break" di cui abbiamo discusso nei nostri codici precedenti e la dimensione del testo del paragrafo è "20px" per "par1".
Qui, la lunga parola del primo paragrafo non è rotta perché non usiamo la proprietà "word-wrap" per questo, è impostata come predefinita. Ma usiamo la "Word-Wrap: Break-Word" per il secondo paragrafo, quindi la lunga parola del paragrafo è rotta.
Conclusione:
Lo scopo di questo tutorial è insegnarti come utilizzare la proprietà "Word-Wrap" CSS. In questo tutorial, abbiamo esaminato la proprietà "Word-Wrap" CSS e descritto di cosa si tratta, come usarla e come funziona. Abbiamo spiegato che questa proprietà rompe la parola lunga e regola questa lunga parola nello spazio specificato. Abbiamo anche mostrato esempi su come utilizzare questa proprietà "word-wrap", nonché i risultati di tutti gli esempi.