Come cambiare il testo predefinito Avvolgere con HTML e CSS

A differenza della carta, le pagine web possono si estende quasi all'infinito lateralmente. Per quanto sia impressionante, non è qualcosa di cui abbiamo davvero bisogno durante la lettura. I browser avvolgono il testo in base al file larghezza del contenitore del testo e il larghezza dello schermo in modo che possiamo vedere tutto il testo senza dover scorrere molto lateralmente (solo verso il basso).

involucro è qualcosa che i browser fanno considerando molti fattori, come la lingua del testo o il posizionamento della punteggiatura e degli spazi non solo spingere verso il basso cosa non rientra nella casella definita per il contenuto del testo.

Oltre al wrapping, anche i browser prenditi cura degli spazi; uniscono più spazi consecutivi nel codice sorgente in un unico spazio sulla pagina sottoposta a rendering e registrano anche interruzioni di riga forzate prima di iniziare a lavorare sul wrapping.

Quando cambiare il testo predefinito

È tutto fantastico e molto apprezzato. Ma possiamo facilmente finire in circostanze in cui il comportamento predefinito del browser non è quello che stiamo cercando. Può essere un titolo quello non dovrebbe essere avvolto o una parola in un paragrafo meglio essere rotto che scendere una linea, lasciando uno spazio vuoto dall'aspetto strano alla fine della linea.

Può anche accadere che abbiamo solo disperatamente bisogno di quegli spazi preservati nel nostro testo, tuttavia il browser continua a combinarli in uno solo, costringendoci ad aggiungere più elementi nel codice sorgente.

Potrebbero anche le preferenze di avvolgimento cambiare con la lingua e lo scopo del testo. Un articolo di notizie del mandarino e un poema francese non devono necessariamente essere avvolti nello stesso modo.

Ci sono un buon numero di proprietà CSS (e HTML)! Che possono controllare l'avvolgimento e i punti di interruzione e anche definire come gli spazi e le interruzioni di riga vengono elaborati prima del wrapping.

Opportunità di avvolgere morbide e pause morbide

I browser decidono dove avvolgere un testo traboccante a seconda dei confini delle parole, trattini, sillabe, punteggiature, spazi e altro. Questi posti sono tutti chiamati opportunità di avvolgimento morbido e quando il browser interrompe il testo in uno di questi luoghi, l'interruzione viene chiamata a rottura morbida avvolgente.

Il modo più semplice per forzare una pausa extra può essere fatto usando il buon vecchio
elemento.

Lo spazio bianco

Se conosci il white-space Proprietà CSS Scommetto che sei venuto a saperlo per la prima volta nello stesso modo di molti altri; durante la ricerca di un modo per prevenire l'involucro del testo. Il nowrap valore di white-space fa esattamente questo.

comunque, il white-space la proprietà è molto più che un semplice involucro. Prima di tutto, cos'è lo spazio bianco? È un set di caratteri spaziali. Ogni spazio nel set varia l'uno dall'altro in lunghezza, direzione, o entrambi.

Un tipico carattere singolo spazio orizzontale è ciò che aggiungiamo premendo il tasto barra spaziatrice. Il tasto Tab aggiunge anche a spazio simile ma con una lunghezza maggiore. Inserire la chiave aggiunge a spazio verticale per iniziare una nuova riga, e in HTML aggiunge a singolo spazio infrangibile alle pagine web. In questo modo, ci sono molti tipi di spazi che costituiscono “spazio bianco”.

Come ho detto all'inizio, i browser collassa più spazi (sia orizzontale che verticale) nella sorgente in un unico spazio. Essi anche considera questi personaggi spaziali per le opportunità di fasciatura (luoghi in cui un testo può essere avvolto) quando è necessario il wrapping.

E sono proprio queste azioni del browser con le quali possiamo controllare white-space. Si noti che il white-space la proprietà non influisce su tutti i tipi di spazio, solo i più frequenti come lo spazio singolo orizzontale regolare, lo spazio delle schede e gli avanzamenti di riga.

Di seguito, puoi vedere uno screenshot di un testo di esempio avvolto dal browser per adattarsi al suo contenitore. L'overflow avviene nella parte inferiore del contenitore e il testo di overflow viene colorato in modo diverso. Noterai il collasso degli spazi consecutivi nel codice.

 
 UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao a¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. 

 .textContainer width: 500px; altezza: 320 px;  

Dopo l'applicazione white-space: nowrap; regola, l'involucro del testo cambia nel modo seguente:

 .textContainer / * ... * / white-space: nowrap;  

Il pre valore di white-space conserva tutti gli spazi bianchi e impedisce l'avvolgimento del testo:

 .textContainer / * ... * / white-space: pre;  

Il pre-wrap valore di white-space conserva tutti gli spazi bianchi e avvolge il testo:

 .textContainer / * ... * / white-space: pre-wrap;  

Infine, il pre-line valore di white-space conserva gli spazi bianchi verticali come nuove linee e avvolge il testo:

 .textContainer / * ... * / white-space: pre-line;  

Interruzioni di parole

Un'altra importante proprietà CSS che dovresti conoscere per il controllo dell'involucro del testo è word-break. Puoi vedere in tutte le schermate sopra il browser avvolto il testo prima della parola “Ciao” sul lato destro, oltre il quale il testo traboccato. Il browser non ha infranto la parola.

Tuttavia, se tu dovere consentire la rottura di lettere in una parola in modo che il testo guardi anche sul lato destro che è necessario utilizzare rompi tutto valore per il word-break proprietà:

 .textContainer / * ... * / word-break: break-all;  

Il word-break la proprietà ha inoltre un terzo valore rompi tutto e normale (appartenente alla rottura di linea predefinita). Il tieni tutto valore non consente la rottura delle parole.

Potresti non essere in grado di vedere l'effetto di tieni tutto in inglese. Ma, nelle lingue dove sono le lettere in una parola unità significative per conto proprio, il browser potrebbe spezzare le parole durante il wrapping e questo può essere impedito usando tieni tutto.

Ad esempio, il lettere in parole coreane, inizialmente rotto per il confezionamento, sono tenuti insieme quando il white-space: keep-all; la regola è specificata.

UN¬AA¸UNªUN³Â ?? à «Â¥UN¼ Ã-A-A¥A-A ??  ?? à  «Â          Â, ¬ «Â»  à ìUN½Â ?? un «Â  ?? ?? ë ¡UN?? A-A ??  à ??¬Â ?? A-A¬Â  ?? à ??¬AA¤. UN¬10 Â-?? UN¬Â «Â»  à ìUN½Â ?? à «Â  ?? ?? UNªUNµAA¬AA?? A-A ??  à ??¬Â  ?? à ??ªAA?? 1997à «Â ...  ?? 3A¬AA?? 10A¬AA¼AA¶Â      12ìAA¼UNªUN¹AA¬UN§UN?? à  «Â ... ¬AA¼UN¬AA?? AA§AA¬AA¸UN¬UN¦AA¬Â- à ??¬AA?? UN¬AA´AA¦UN½Ã «Â  ?? ?? ë   ??¤. UN¬UN§AAªUN¸UN?? à «Â ??  ± ë ¡ ?? Ã-  ?? à ??¬Â ?? A-A¬Â  ?? à ??¬AA¤. UN¬AA´ A-A ??  à ??¬Â  ?? à ??¬Â- à ??¬Â  ?? ?? à «Â  ?? ?? UN¬Â- ... êUN³UN?? UN¬Â      à ìAA?? UN¬Â    ¬UN¸UNªÂ  ° à ?? «Â  ??¤UN¬AA´ A-A ?? ¨UNªAA?? AAªUN¨UN¬AA¬ à «Â  ??¤UN¬Â  ?? à ??ªUN³UN¼ UNªÂ  ° à ??¬AA?? AA¶AA¬AA¼AA¥UN¼ à «Â  ??¤Ã «Â £ ¹à «Â  ?? ?? ë   ??¤.

 .textContainer / * ... * / word-break: keep-all;  

Questa proprietà potrebbe supportare un altro valore chiamato break-word nel futuro. Vedrai come break-word lavora più tardi, nel “Avvolgere troppo pieno” sezione di questo articolo.

Opportunità di interruzione di parole

Gli sviluppatori possono anche aggiungi opportunità di avvolgimento all'interno delle parole, usando il Elemento HTML. Se un browser deve racchiudere una stringa di testo, prenderà in considerazione il punto in cui è presente per un'opportunità di avvolgimento.

 
 UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Hciao¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. UN¢AA?? Ciao. 
 

 .textContainer / * ... * / white-space: pre-wrap;  

Senza , il tutto “Ciao” la parola sarebbe stata resa in una nuova riga. Aggiungendo al codice HTML, abbiamo informato il browser che va bene spezzare la parola a quel punto per il confezionamento, nel caso sia necessario.

I trattini

Il trattini La proprietà CSS è un altro modo per controllare le interruzioni tra le lettere in una parola. Se sei interessato, abbiamo un articolo separato sulla sillabazione CSS. In breve, la proprietà ti permette di creare opportunità di wrapping attraverso la sillabazione.

Suo auto valore richiede al browser Sillabare e rompere automaticamente le parole dove necessario mentre si avvolge. Il Manuale valore costringe i browser a avvolgere (se necessario) nelle opportunità di sillabazione aggiunte da noi, come il carattere trattino (‐) o ­ (trattino morbido). Se nessuna è stato dato come valore ci sarebbe nessun avvolgimento eseguito vicino ai trattini.

 
 bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse 
 

 .textContainer / * ... * / -webkit-hyphens: auto; -ms-hyphens: auto; trattini: auto;  

Avvolgere troppo pieno

Il trabocco-wrap La proprietà CSS controlla se a il browser potrebbe rompere le parole (o spazi preservati, supporto per il quale potrebbe accadere nel prossimo futuro) su overflow. Quando il break-word il valore è dato per trabocco-wrap, la parola sarà rotto nel caso non vengono trovate altre opportunità di avvolgimento morbido nella linea.

Nota che trabocco-wrap è anche conosciuto come word-wrap (sono pseudonimi).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / * ... * / overflow-wrap: break-word;  

Senza spazio tra le lettere nel codice HTML di cui sopra (cioè senza opportunità di wrapping), il testo non è stato avvolto all'inizio e era conservato come una sola parola.

Tuttavia, quando è stato dato il permesso di avvolgere il testo rompendo le parole (ad esempio il break-word valore è stato dato a trabocco-wrap), il involucro è successo rompendo l'intera stringa ovunque fosse necessario.