Avvolgimento di overflow CSS

L'attributo di Overflow-Wrap in CSS consente agli utenti di dire al browser che in qualche modo un contenuto all'interno del componente specificato può essere suddiviso in numerose linee in una posizione normalmente indistruttibile. Ciò impedisce a una stringa di testo molto lunga di produrre problemi di layout a causa del trabocco. Questa proprietà può essere applicata agli elementi in linea e può essere utilizzata in un foglio di stile esterno, stile del contorno e stile in linea di qualsiasi file HTML. In questa guida, ti aiuteremo a capire l'uso della proprietà avvolgente di overflow dello stile CSS in HTML per modellare le sezioni "Div" utilizzando diversi stili di avvolgimento. A tale scopo, ti consigliamo di utilizzare il codice Visual Studio per lo scripting HTML.

Esempio 01: avvolgimento normale

Nel nostro primo esempio, discuteremo dell'uso di un normale avvolgimento con diversi stili di scrittura. Quindi, abbiamo utilizzato il codice Visual Studio per creare un nuovo file HTML chiamato "Test.html ”e avvia lo script html al suo interno. Il codice HTML è stato avviato con il tag HTML principale seguito dai tag principali della testa e del corpo. All'interno del tag del corpo, abbiamo usato i primi due titoli di dimensioni diverse. La direzione 1 è la più grande mentre la direzione 2 è la seconda più grande che dimostra che questo sarebbe un normale avvolgimento.

Dopo questa intestazione, abbiamo utilizzato il tag "Div" per creare una nuova sezione all'interno della pagina Web HTML principale. Questo tag "Div" è stato specificato con la classe "D1" per essere differenziata al momento dello stile. Abbiamo aggiunto una riga di testo o un paragrafo per avvolgerla in un normale stile avvolgente. Questo testo è semplice e non contiene parole lunghe in esso. Dopo questo tag "Div", abbiamo usato la seconda intestazione di questa pagina HTML per visualizzare che il testo Div successivo contenga anche un normale avvolgimento. Quindi, abbiamo un nuovo tag "Div" specificato dalla classe "D2" per la differenziazione nello stile.

Questa sezione "div" contiene un lungo testo o paragrafo insieme a una lunga parola in esso in modo da poter vedere come reagi una normale proprietà di wrap di overflow. Dopo questa sezione, il corpo è stato completato e il tag del corpo verrà chiuso insieme al tag principale "HTML". All'interno del tag "head" di questo codice HTML, abbiamo un tag di stile per modellare la pagina HTML. La parola chiave "Div" è stata utilizzata per modellare entrambe le sezioni "div" a 100 pixel con il bordo di 3 pixel di colore "blu viola" per ciascuno. La larghezza e la proprietà del bordo sono state utilizzate qui per questo scopo. Successivamente, entrambe le sezioni di Div sono state disegnate separatamente con l'uso della loro classe. Abbiamo avvolto entrambi nell'involucro normale usando la proprietà "Overflow-Wrap". Lo stile è stato completato. Quindi, lo stile e il tag della testa sono chiusi qui. Il nostro script HTML è stato completato ed è pronto per l'uso. Quindi, l'abbiamo salvato e abbiamo cercato di eseguirlo sul codice VS.

Abbiamo utilizzato il menu "Esegui" dal codice Visual Studio seguito dall'opzione "Avvia debug". Ha chiesto di selezionare il browser Chrome dall'elenco. L'abbiamo eseguito e abbiamo l'output a cinghia mostrato per due sezioni "div" contenente un avvolgimento normale sul suo testo. La prima sezione "Div" ha mostrato il suo testo in un formato ordinato e normale perché non contiene una parola molto lunga che non può essere montata nella larghezza di 100 pixel.

D'altra parte, la seconda casella "Div" contiene una parola molto lunga nel suo testo. Quindi, l'output mostra che la parola ha attraversato il bordo della casella "div" da 100 pixel come uso di un avvolgimento normale. Questo perché il normale avvolgimento non rompe la parola per adattarla alla sezione "div".

Esempio 02: Break-Word Wrap

In questo esempio, discuteremo dell'uso dell'involucro di pausa rispetto al normale avvolgimento. Quindi, abbiamo utilizzato lo stesso codice HTML nello strumento di codice Visual Studio ma con pochi aggiornamenti. Quindi, inizieremo la sua spiegazione dal tag "corpo". Abbiamo aggiornato entrambi i dati di testo dei tag "div" con la frase lunga contenente una lunga parola in essa. L'intestazione 1 verrebbe dichiarata come un involucro normale mentre l'altra intestazione della taglia 1 è dichiarata come un involucro di "pausa".

Abbiamo aggiornato il testo della sezione "Div" per entrambe le sezioni "Div" separatamente. Il corpo è ora completo e guarderemo lo stile. La stessa larghezza e proprietà di confine sono state utilizzate per entrambe le sezioni "div" e le loro classi sono state utilizzate per il loro stile separato. Abbiamo specificato un involucro normale per la prima sezione "div" mentre l'involucro "pausa" per la seconda sezione "div". Abbiamo salvato questo codice.

Dopo aver eseguito questo codice aggiornato nel browser, abbiamo l'output di emergenza mostrata. Il primo testo della sezione "Div" sta attraversando il bordo senza rompere una parola mentre l'altra sezione "Div" ha una lunga parola che è stata rotta e spostata nella riga successiva per adattarsi al riquadro "Div". Questo viene fatto mediante l'uso di un involucro di pausa per lo styling.

Esempio 03: ovunque avvolgimento

In questo esempio, spiegheremo l'uso della proprietà Overflow-Wrap per applicare l'involucro "ovunque" sui nostri "dati" e confrontarlo con l'involucro di pausa. Quindi, all'interno del tag corporeo del nostro codice HTML, abbiamo aggiornato le sue intestazioni. La prima intestazione della taglia 1 è stata dichiarata come una parola di pausa "mentre la seconda intestazione della stessa dimensione è dichiarata" ovunque ". Entrambi i tag "div" contengono il testo della frase lunga aggiornata contenente almeno 1 parola lunga in esso. Entrambe le frasi nei tag "Div" sono aggiornate separatamente per la parola di pausa e ovunque avvolgono separatamente.

All'interno del tag di stile, abbiamo nuovamente utilizzato la larghezza di 100 pixel per entrambi i tag contenenti il ​​bordo del colore solido "viola blu". Dopo questo, abbiamo usato le classi di entrambi i tag separatamente per modellarli di conseguenza: D1 e D2. La proprietà di Overflow-Wrap è stata utilizzata per entrambi i "div" separatamente per modellare il primo div con avvolgimento "pausa" e il secondo "div" con l'involucro "ovunque". Salviamo ed eseguiamo questo codice ora.

L'output di questo codice aggiornato non ha mostrato una modifica minore nello stile di entrambe le sezioni "Div". Pausa e ovunque è la stessa.

Conclusione

Si tratta dello styling di diversi elementi di un file HTML con la proprietà "overflow-wrap" per evitare l'eccessore di diversi testi di stringhe di qualsiasi tipo di elemento nelle pagine Web HTML. Abbiamo visto tre esempi HTML molto semplici ma utili che coprono separatamente l'involucro normale, l'involucro di pausa e l'involucro ovunque. Insieme a ciò, abbiamo anche coperto i loro confronti.