Crea una casella con testo scorrevole usando CSS e HTML

Un HTML la casella di scorrimento è una casella che aggiunge barre di scorrimento sul lato destro e in basso quando il contenuto della casella è più grande delle dimensioni della casella. In altre parole, se hai una casella che può contenere circa 50 parole e hai un testo di 200 parole, una casella di scorrimento HTML metterà le barre di scorrimento verso l'alto per farti vedere le 150 parole aggiuntive. In HTML standard che spingerebbe semplicemente il testo extra fuori dalla scatola.

Fare lo scroll HTML è abbastanza facile. Hai solo bisogno di impostare la larghezza e altezza dell'elemento che si desidera scorrere e quindi utilizzare il CSS overflow per impostare la modalità di scorrimento.

Cosa fare con il testo extra?

Quando hai più testo di quello che entra nello spazio del tuo layout, hai alcune opzioni:

• Riscrivi il testo in modo che sia più corto e si adatti.
• Consenti al testo di fluire oltre i limiti e spera che il layout possa flettersi per supportarlo.
instagram viewer
• Taglia il testo dove trabocca.
• Aggiungi barre di scorrimento (di solito verticali per il testo) in modo che lo spazio scorra per mostrare il testo extra.

L'opzione migliore è in genere l'ultima opzione: creare una casella di testo scorrevole. Quindi il testo extra può ancora essere letto, ma il tuo design non è compromesso.

HTML e CSS per questo sarebbero:

testo quì... 

Il trabocco: automatico; dice al browser di aggiungere barre di scorrimento se sono necessarie per evitare che il testo trabocchi i confini del div. Ma affinché funzioni, sono necessarie anche le proprietà di stile di larghezza e altezza impostate sul div, in modo che ci siano dei limiti da superare.

Puoi anche tagliare il testo modificando l'overflow: auto; per trabocco: nascosto; Se ometti la proprietà overflow, il testo si estenderà oltre i confini del div.

Puoi aggiungere barre di scorrimento a più di un semplice testo

Se hai un'immagine grande che desideri visualizzare in uno spazio più piccolo, puoi aggiungere barre di scorrimento attorno ad essa come faresti con il testo.

In questo esempio, l'immagine 400x509 è all'interno di un paragrafo 300x300.

Le tabelle possono trarre vantaggio dalle barre di scorrimento

Lunghe tabelle di informazioni possono diventare molto difficili da leggere molto rapidamente, ma inserendole all'interno di un div di dimensioni limitate e quindi aggiungendo la proprietà overflow, puoi generare tabelle con molti dati che non occupano spazio estremo sul tuo pagina.

Il modo più semplice è proprio come con le immagini e il testo, basta aggiungere un div attorno al tavolo, impostare la larghezza e l'altezza di quel div e aggiungere la proprietà overflow:

... 

Una cosa che succede quando lo fai è che di solito appare una barra di scorrimento orizzontale perché il browser presuppone che il cromo delle barre di scorrimento si sovrapponga alla tabella. Esistono molti modi per risolvere questo problema, modificando la larghezza della tabella e altri. Ma il nostro preferito è semplicemente disattivare lo scorrimento orizzontale con la proprietà CSS 3 overflow-x

Basta aggiungere overflow-x: nascosto; al div, e questo rimuoverà la barra di scorrimento orizzontale. Assicurati di testarlo, poiché potrebbero esserci contenuti che scompaiono.

Firefox supporta l'uso dei tag TBODY per l'overflow

Una caratteristica davvero interessante del browser Firefox è che puoi usare la proprietà overflow sui tag della tabella interna come tbody e thead o tfoot. Ciò significa che puoi impostare le barre di scorrimento sul contenuto della tabella e le celle dell'intestazione rimangono ancorate sopra di esse. Funziona solo in Firefox, il che è un peccato, ma è una bella funzionalità se i tuoi lettori usano solo Firefox. Sfoglia questo esempio in Firefox per vedere cosa intendo.

...NomeTelefonoJennifer502-5366. 

...