Come Fare Un’Interruzione Di Riga In Javascript

| | | |

Un’interruzione di riga può essere aggiunta agli elementi HTML senza dover utilizzare un ritorno di interruzione
utilizzando pseudo-elementi. Gli pseudo-elementi sono usati per modellare una parte specifica di un elemento. Qui useremo::after per definire lo stile di un elemento HTML per aggiungere un’interruzione di riga.

Nel codice sopra, usiamo lo pseudo-elemento :: dopo su ogni elemento in linea (rappresentato dallo span) per aggiungere un ritorno a capo (rappresentato dalla "a") dopo la riga di testo dello span. Il ::after in questo caso ha una proprietà di contenuto e una proprietà di spazio vuoto disponibile per l’uso.

Il ‚Äòcontenuto‚Äô La proprietà descrive le cose che vogliamo iniettare nello span. La proprietà dello spazio bianco ci dice se dobbiamo preservare lo spazio bianco. Lasciare disattivata questa particolare proprietà non interferisce con la caratteristica di blocco in linea dello span. Quindi dobbiamo aggiungere questa particolare proprietà per sovrascriverla.

Mentre si pasticcia sempre più con lo stile e il layout, probabilmente scoprirai che la soluzione sopra non è necessariamente la soluzione migliore. Se aggiungi padding di qualsiasi tipo e anche lo sfondo, vedrai che quelle proprietà CSS tendono a confondere il punto in cui lo sfondo entra in gioco. Vedere l’esempio di codice di seguito che illustra il punto:

Professore Silente

Professore McGonagall

Professore python

Professore Trelawney

Esistono altre soluzioni che offrono risultati simili a questo ‚Äì dove lo sfondo inizia nella riga precedente e quindi esegue un ritorno a capo con il testo sullo sfondo corretto nella riga successiva. Mi viene in mente la proprietà CSS box decoration break: clone che può essere aggiunta alla classe span sopra per ottenere un risultato simile, ma in realtà non ci dà il risultato che vogliamo.

L’utilizzo di elementi a livello di blocco come

o