Come trasferire a capo testo coi CSS in una pagina web.

Formatazione di testo in CSS3 riguarda le proprietà che permettono di risolvere  problemi come  trasferimento a capo, taglio del testo in ecesso all'interno del contenitore, creare  indentazzione e altre situazione.

Come trasferire a capo o nascondere una parte di testo coi CSS

1. Nascondere testo in ecesso con  text-overflow

La proprietà consente di limitare la lunghezza del testo quando non si adatta all'altezza del blocco contenitore, con utilizzo di questa proprietà il testo sara tagliato (nascondendo la parte che fuoriesce )  e sostituito visivamente  con puntini  di sospensione. La proprietà funziona solo quando sono  impostati le seguenti opzioni:  indicata larghezza  del contenitore e l'elemento deve avere proprieta  overflow: hidden e white-space: nowrap. Non si eredita

text-overflow
Valore:  
clip Valore di default. Il testo viene visualizzato nel limite del area di contenitore il resto viene tagliato..
costruzione tipo "leggi il resto" come valore del text-overflow:(posiamo inserire del testo tipo “continua” )
ellipsis Il testo come anche sopra viene tagliato e prima della parte tagliata vengono mostrati  puntini di sospensione
initial Imposta il valore corrente come valore di default
inherit Eredita valore della proprietà dal elemento genitore.

Sintassi

p {
width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

Esempio

Testo tagliato nei margini del blocco contenette

Testo tagliato nei margini del blocco contenette

 

2. Tagliare e forzare a capo parole con la proprieta  word-break

In circostanze normali, parole vengono trasferiti in un'altra linea a capo nel punto degli  spazi o trattini ( "migrazione soft"), oppure nel caso di trasferimento forzato con tag <br/>. Invece proprieta word-break  permette di impostare le regole di trasferimento al interno delle  parole, in modo che  le frasi lungi riempono completamente lo spazio all'interno del contenitore. La proprietà si eredita.

word-break
Valore:  
normal Valore di default. Testo nel contenitore viene visualizzato nella forma normale in conformità con le regole stabilite nella lingua.
break-all trasferimento a capo nelle parole puo essere realizzato tra due qualsiasi lettere.
keep-all Evita creazione spaccature tra coppie di lettere della parola.
initial Imposta il valore della proprieta come valore di default.
inherit Eredita valore della proprieta dal valore del genitore.

Sintassi

p {word-break: normal;}
p {word-break: break-all;}
p {word-break: keep-all;}

Il grande Oximox tentò di dissuaderla, poiché quel luogo pullulava di virgole spietate, punti interrogativi selvaggi e subdoli punti e virgola, ma il piccolo testo casuale non si fece certo fuorviare. Raccolse le sue sette maiuscole, fece scorrere la sua iniziale nella cintura, e si mise in cammino.

3. Trasferire a capo riga  parole lunge con word-wrap

Questa opzione  vienen utilizzata nei casi quando nel testo si trova una parola che è molto lunga e non ci sta nella largezza prevista per il blocco essa continte. In questo caso questa proprieta permette di rompere questa lunga parola e trasferire in modo forzato in una riga sucessiva. Si eredita. Funziona solo se il valore di white-space consente la interruzioni di riga.

word-wrap
Valore:  
normal Il valore di default. Le parole vengono messi a capo seguendo le norme della lingua.
break-word Suddivisione di parole e trasferimento a capo alla riga successiva si verifica nelle confini di contenitore contenente il testo.
initial Imposta il valore della proprieta come valore di default.
inherit Eredita valore della proprieta dal valore del genitore.

Sintassi

p {word-wrap: normal;}
p {word-wrap: break-word;}

 

Elettroencefalograficamente

medico-scientifico

Le proprietà citate in questo articolo possono essere inserite e utilizzate anche nel vostro template  Joomla o WP . Unica cosa e che  dobbiamo tenere in considerazione la eredita di queste proprietà . Quindi sarebbe utile utilizzarli solo nei posti giusti. E non per tutti i paragrafi o testo del template in uso.

Letto 1344 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso