10 aprile 2016

Ciao a tutti). Continuo a scrivere di varie proprietà utili del linguaggio CSS che possono in qualche modo aiutare nel layout. E oggi voglio dirti come avvolgere le parole in css se non si adattano al tuo contenitore. Ti mostrerò tutto con un esempio reale.

Attiva la sillabazione per le parole che non si adattano

Diciamo che ho un blocco largo 100 pixel e ho bisogno di scriverci del testo. La parola si trova nel testo Autoestraente... Questo è un archivio, per esempio) Ma non è il punto. La parola è molto lunga, semplicemente non si adatta alla larghezza del contenitore. Scriviamolo in un blocco così stretto (100 pixel). Cosa accadrà?

Come puoi vedere, la povera parola è strisciata fuori dal contenitore, beh, non ha nessun posto dove andare, cosa puoi fare. E questo è senza rientro. Quindi, qui la proprietà di a capo automatico viene in soccorso. Ecco cosa devi chiedere a un blocco per abilitare il ritorno a capo automatico in esso:

Word-wrap: break-word;

E per persuasione, puoi anche aggiungere imbottitura. Quindi, dopo aver applicato la proprietà, vediamo che le parole troppo lunghe andranno a capo, lettera per lettera, su un'altra riga. Inoltre, anche se la seconda riga non è sufficiente per una parola, il resto verrà trasferito nella terza, ecc.

Tengo a precisare che l'immobile può essere utilizzato in sicurezza. Innanzitutto, oggi funziona alla grande nei browser. In secondo luogo, funziona in modo intelligente. Vale a dire, per tutte le parole normali, non ci sarà sillabazione, le parole intere verranno trasferite alla riga successiva, quindi la leggibilità non sarà compromessa. Puoi vederlo in questo screenshot.

Quando usare il word-wrap

In realtà, finora vedo 2 casi d'uso. Il primo è solo per i blocchi stretti, dove hai paura che le parole lunghe possano strisciare brutte fuori dal blocco. Il secondo è quando il designer ha concepito in modo che il nome del sito dovrebbe essere in più righe.

Quindi, in questo articolo, abbiamo imparato come eseguire il ritorno a capo automatico in css. Questo è tutto per me oggi. Ci vediamo.

Lezione 5.

In questo tutorial, noi:
1. Impariamo come rendere il codice html più comodo e facile da leggere per noi.
2. Analizziamo come eseguire correttamente il wrapping di una riga di testo.

Rendiamo il codice html a portata di mano.

Ora il nostro codice è chiaro e di facile lettura, poiché contiene poco testo e praticamente non ci sono tag. Quando creiamo una pagina più complessa, ci saranno molti tag, quindi sarà difficile trovare quello che ti serve.

In modo che non ci sia confusione dai tag, è necessario inizialmente disporre i tag e le linee in modo che siano percepiti visivamente più facilmente. Quando il browser legge le informazioni dalla pagina html, non importa quanti spazi o quante righe vuote ci sono nel codice.

Ho cambiato il testo nel codice della pagina relativo a quello che abbiamo creato, ma non importa. Le immagini di sinistra e di destra mostrano lo stesso codice. Entrambe le opzioni verranno visualizzate dal browser sullo schermo del monitor esattamente allo stesso modo. D'accordo, lavorare con il codice mostrato a destra sarà molto più semplice che con quello a sinistra.

Il codice che stiamo guardando è molto semplice, ma anche adesso c'è una notevole differenza nella percezione visiva. Non ci sono regole definite per "mettere le cose in ordine", ogni maestro decide da solo come è più conveniente per lui lavorare.

Interruzione di riga HTML. Il tag & ltbr & gt.

Presta attenzione all'immagine. Nella prima versione il testo è scritto in una riga, nella seconda versione in due righe.

Il browser visualizzerà entrambe le opzioni allo stesso modo. Il testo sarà scritto su una riga:

Perché è così, chiedi? Infatti, in uno dei codici, parte del testo è stata trasferita su un'altra riga. Sarebbe logico se nel browser parte del testo venisse trasferito anche su un'altra riga, ma html ha una sua logica al riguardo. Se facciamo un'interruzione di riga nel codice html, allora per il browser è equivalente a uno spazio(come un normale spazio tra le parole nel testo). Se spostiamo una parte del testo non di una riga in basso, ma di 2 o 3 (qualsiasi numero), il browser conterà comunque questa distanza come uno spazio ordinario tra le parole e quando viene visualizzato sullo schermo, il testo verrà scritto su una riga .

& Ltbr & tag gt

Quando abbiamo fatto conoscenza con i tag nella terza lezione, ho detto che ci sono tag che non richiedono la chiusura. Etichetta & ltbr & gt uno di questi, serve per le interruzioni di riga.
Applichiamolo nel codice:

Abbiamo inserito un tag & ltbr & gt nel nostro codice html e ora quando il file viene lanciato tramite il browser, parte del testo verrà trasferito alla riga successiva.
* Non dimenticare di salvare le modifiche nel Blocco note (Ctrl + S) e aggiornare la pagina nel browser (F5).

Durante l'impaginazione, gli editori hanno periodicamente una domanda: come verrà effettuato il trasferimento del testo? Nella maggior parte dei casi, il browser gestisce da solo questa attività. Ma a volte questo processo deve essere tenuto sotto controllo, soprattutto progettando parole e frasi lunghe che, se erroneamente sillabate, perdono il loro significato.

Proprietà a capo automatico

In HTML, c'è un tag speciale per separare le stringhe
... Ma il suo uso troppo frequente è considerato una cattiva forma tra gli sviluppatori e spesso indica mancanza di professionalità. Come prova, immagina di avere un logo e di volere che ogni lettera inizi su una nuova riga:

Il risultato è un codice ingombrante e brutto che darà a qualsiasi sviluppatore uno shock culturale. E se volessi che il logo sia orizzontale nella versione desktop e verticale quando lo schermo è largo meno di 550 pixel? Pertanto, utilizzare sempre fogli di stile CSS per personalizzare l'aspetto degli elementi. Inoltre, con l'aiuto degli strumenti CSS, le interruzioni di riga vengono eseguite in modo più elegante. Allo stesso tempo, non c'è markup ridondante, che rallenta solo la velocità di caricamento della pagina.

La prima proprietà da considerare per l'elaborazione di testi è il ritorno a capo automatico. Accetta tre valori: normal, break-all e keep-all. Hai solo bisogno di ricordare il break-all per lavorare. Normale è l'impostazione predefinita e non ha senso specificarlo. Keep-all significa nessuna interruzione di riga nel documento CSS. Progettato specificamente per caratteri cinesi, giapponesi e coreani. Pertanto, se non hai intenzione di bloggare in nessuna di queste lingue, la proprietà non ti sarà utile. Inoltre, non è supportato dal browser Safari e dai telefoni cellulari iOS.

Per assegnare un'interruzione di riga per ogni lettera al logo dell'esempio precedente utilizzando CSS, è necessario scrivere il codice seguente:

P (font: grassetto 30px Helvetica, sans-serif; larghezza: 25px; word-wrap: break-all;)

La larghezza e la dimensione del carattere sono selezionate in modo tale che ci sia spazio sufficiente per una sola lettera. Il ritorno a capo automatico con un valore generale indica al browser di avvolgere la parola su una nuova riga ogni volta. Questa proprietà non può essere definita insostituibile. Ma è utile quando si progettano piccoli blocchi con testo, ad esempio campi per l'immissione di commenti.

Proprietà dello spazio bianco

Un errore comune per gli sviluppatori web alle prime armi è provare a modificare il testo con spazi o premere Invio, e poi chiedersi perché i loro sforzi non sono visibili sulla pagina. Non importa quante volte premi Invio, il browser lo ignorerà. Ma c'è un modo per far sì che visualizzi il testo nel modo desiderato e tenendo conto di tutta la spaziatura.

In un documento CSS, le interruzioni di riga assegnate utilizzando la proprietà white-space possono essere configurate per tenere conto degli spazi o premere Invio. Lo spazio bianco con il valore pre-riga costringerà il browser a vedere Invio nel testo.

Se cambi pre-line in pre-wrap nel tuo codice CSS, le interruzioni di riga prenderanno in considerazione gli spazi bianchi. Al contrario, non consentire alcuna sillabazione impostando la proprietà dello spazio bianco con il valore nowrap sul testo:

#wrapper p (colore: #FFF; padding: 10px; font: grassetto 16px Helvetica, sans-serif; spazio bianco: nowrap;)

Testo in eccesso

Un altro strumento utile per lavorare con il testo è l'overflow del testo. Oltre alle interruzioni di riga, la proprietà CSS consente di ritagliare il contenuto quando il contenitore è pieno. Ci vogliono due valori:

• clip - taglia semplicemente il testo;
• ellissi - aggiunge i puntini di sospensione.

#wrapper p (color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; text-overflow: ellissis; / * Aggiungi ellissi * / white-space: nowrap; / * Disabilita il ritorno a capo automatico * / overflow: nascosto; / * Nasconde tutto al di fuori del contenitore * /)

Affinché la proprietà funzioni, all'elemento deve essere assegnato anche un'interruzione di riga e un overflow con il valore nascosto.

Spesso è necessario aggiungere un nuovo paragrafo, ma senza una riga vuota, che viene inserita dal tag di paragrafo

Per alcuni passaggi di testo, la spaziatura standard utilizzata per i paragrafi è semplicemente inappropriata. Possono essere iscrizioni sotto immagini e in tabelle, poesie, citazioni, note a piè di pagina e note.

Per l'avvolgimento forzato della riga, viene fornito un tag speciale, la cui funzione è nel suo nome br (break row - "per rompere una riga, riga"). Etichetta
html significa che tutto il contenuto che lo segue deve iniziare su una nuova riga. Se necessario, puoi mettere più tag in fila per ottenere la spaziatura richiesta.

Etichetta
non fa distinzione tra maiuscole e minuscole e non richiede un tag di chiusura perché è un elemento vuoto, ma è meglio prendere l'abitudine di chiudere tutti i tag. In XHTML, il tag break deve essere "strettamente chiuso" con una barra rovesciata.

Esempio di utilizzo del tag di interruzione