Come configurare smartphone e PC. Portale informativo
  • casa
  • Ferro da stiro
  • Opzioni di base per risolvere il problema del ritorno a capo automatico nei CSS. Come avvolgere le parole in CSS che non rientrano in un blocco

Opzioni di base per risolvere il problema del ritorno a capo automatico nei CSS. Come avvolgere le parole in CSS che non rientrano in un blocco

Spesso è necessario avvolgere il testo in una nuova riga all'interno di una cella di Excel. Cioè, sposta il testo riga per riga all'interno di una cella come mostrato nell'immagine. Se, dopo aver inserito la prima parte del testo, premi semplicemente il tasto INVIO, il cursore verrà spostato sulla riga successiva, ma in una cella diversa, e dobbiamo spostarci nella stessa cella.

Questa è un'attività molto comune e viene risolta in modo molto semplice: per avvolgere il testo su una nuova riga all'interno di una cella di Excel, è necessario premere ALT+INVIO(tenere premuto il tasto ALT, quindi senza rilasciarlo premere il tasto ENTER)

Come spostare il testo su una nuova riga in Excel usando una formula

A volte è necessario eseguire un'interruzione di riga non una volta, ma utilizzando le funzioni in Excel. Come in questo esempio nella foto. Inseriamo nome, cognome e patronimico e viene automaticamente raccolto nella cella A6

Nella finestra che si apre, nella scheda "Allineamento", è necessario spuntare la casella accanto a "Sposta per parole" come mostrato nell'immagine, altrimenti il ​​​​ritorno a capo in Excel non verrà visualizzato correttamente utilizzando le formule.

Come sostituire il trattino con un altro carattere in Excel e viceversa usando una formula

Può cambia il carattere del trattino in qualsiasi altro carattere, ad esempio uno spazio, utilizzando la funzione di testo SOSTITUISCI in Excel

Considera l'esempio nella foto sopra. Quindi, nella cella B1 scriviamo la funzione SOSTITUZIONE:

SOSTITUZIONE(A1,CHAR(10), " ")

A1 è il nostro testo di interruzione di riga;
CHAR (10) è un'interruzione di riga (ne abbiamo discusso un po' più in alto in questo articolo);
" " è uno spazio, poiché stiamo cambiando l'interruzione di riga in uno spazio

Se è necessario eseguire l'operazione inversa, modificare lo spazio in un trattino (carattere), la funzione sarà simile alla seguente:

SOSTITUZIONE(A1, " ", CAR(10))

Ti ricordo che affinché il ritorno a capo della riga si rifletta correttamente, è necessario specificare "Avvolgi attraverso le righe" nelle proprietà delle celle, nella sezione "Allineamento".

Come cambiare il trattino in spazio e tornare indietro in Excel usando RICERCA - SOSTITUZIONE

Ci sono momenti in cui le formule sono scomode da usare ed è necessario sostituirle rapidamente. Per fare ciò, utilizziamo Trova e sostituisci. Seleziona il nostro testo e premi CTRL + H, apparirà la seguente finestra.

Se dobbiamo cambiare l'interruzione di riga in uno spazio, nella riga "Trova" è necessario inserire un'interruzione di riga, per questo posizionarsi nel campo "Trova", quindi premere il tasto ALT, senza rilasciarlo, digitare 010 sulla tastiera - questo è il codice di interruzione di riga, non sarà visibile in questo campo.

Successivamente, nel campo "Sostituisci con", inserisci uno spazio o qualsiasi altro carattere che devi modificare e fai clic su "Sostituisci" o "Sostituisci tutto".

A proposito, in Word questo è implementato in modo più chiaro.

Se è necessario modificare il carattere di interruzione di riga in uno spazio, nel campo "Trova" è necessario specificare il codice speciale "Interruzione di riga", che è indicato come ^ l
Nel campo "Sostituisci con:", devi solo creare uno spazio e fare clic su "Sostituisci" o "Sostituisci tutto".

Puoi modificare non solo le interruzioni di riga, ma anche altri caratteri speciali, per ottenere il codice corrispondente, devi fare clic sul pulsante "Altro >>", "Speciale" e selezionare il codice che ti serve. Ti ricordo che questa funzione è solo in Word, in Excel questi caratteri non funzioneranno.

Come modificare l'interruzione di riga in spazio o viceversa in Excel utilizzando VBA

Considera un esempio per le celle selezionate. Cioè, selezioniamo le celle richieste ed eseguiamo la macro

1. Cambia gli spazi in trattini nelle celle selezionate usando VBA

Sub SpacesSulla sillabazione()
Per ogni cella in selezione
cell.Value = Sostituisci(cell.Value, Chr(32) , Chr(10) )
Prossimo
fine sub

2. Cambia i trattini in spazi nelle celle selezionate usando VBA

Sub Carry onSpazi()
Per ogni cella in selezione
cell.Value = Sostituisci(cell.Value, Chr(10) , Chr(32) )
Prossimo
fine sub

Il codice è molto semplice Chr (10) è un'interruzione di riga, Chr (32) è uno spazio. Se vuoi passare a qualsiasi altro carattere, sostituisci semplicemente il numero di codice corrispondente al carattere richiesto.

Codici caratteri per Excel

L'immagine seguente mostra vari simboli e i codici corrispondenti, diverse colonne hanno un carattere diverso. Per ingrandire l'immagine, fare clic sull'immagine.

Durante la stesura, i webmaster hanno periodicamente una domanda: come verrà avvolto il testo? Nella maggior parte dei casi, il browser gestisce questa attività da solo. Ma a volte questo processo deve essere preso sotto controllo, soprattutto quando si modellano parole e frasi lunghe che, se trasferite in modo errato, perdono il loro significato.

proprietà a capo automatico

In HTML, c'è un tag speciale per separare le righe.
. 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 desideri che ogni lettera inizi su una nuova riga:

Controllo delle interruzioni di parola

Il risultato è un codice ingombrante e brutto, dal quale qualsiasi sviluppatore avrà uno shock culturale. E se si desidera visualizzare il logo orizzontalmente sulla versione desktop, ma verticalmente se la larghezza dello schermo è inferiore a 550 pixel? Pertanto, utilizzare sempre fogli di stile sovrapposti 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 riduce solo la velocità di caricamento delle pagine.

La prima proprietà da considerare per l'elaborazione del testo è il ritorno a capo automatico. Ci vogliono tre valori: normale, break-all e keep-all. Devi solo ricordare il break-all per lavorare. Normale è l'impostazione predefinita e non ha senso specificarlo. Keep-all significa prevenire interruzioni di riga in un documento CSS. Progettato specificamente per caratteri cinesi, giapponesi e coreani. Quindi, se non hai intenzione di bloggare in nessuna di queste lingue, non avrai bisogno della funzione. Inoltre, non è supportato dal browser Safari e dai telefoni cellulari iOS.

Per assegnare una nuova riga per ogni lettera al logo dell'esempio precedente utilizzando i CSS, è necessario scrivere il seguente codice:

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 vi sia spazio sufficiente per una sola lettera. Word-wrap con un valore di break-all indica al browser di avvolgere la parola su una nuova riga ogni volta. Questa proprietà non può essere definita insostituibile. Ma tornerà utile quando si progettano piccoli blocchi con testo, come i campi dei commenti.

proprietà dello spazio bianco

Un errore comune commesso dagli sviluppatori web inesperti è provare a modificare il testo con spazi o premere il tasto Invio e poi chiedersi perché i loro sforzi non vengono visualizzati sulla pagina. Non importa quante volte premi "Invio", il browser lo ignorerà. Ma c'è un modo per visualizzare il testo nel modo desiderato e tenere conto di tutta la spaziatura.

In un documento CSS, le interruzioni di riga, assegnate con la proprietà white-space, possono essere configurate per rispettare gli spazi o premendo il tasto Invio. Gli spazi bianchi con un valore di pre-line faranno sì che il browser visualizzi Invio nel testo.

Controllo delle interruzioni di parola

Se modifichi pre-line in pre-wrap nel tuo codice CSS, il line wrap includerà degli spazi. Al contrario, disabilita qualsiasi avvolgimento impostando la proprietà white-space sul testo con il valore nowrap:

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

overflow del testo

Un altro strumento utile per lavorare con il testo è l'overflow del testo. Oltre al ritorno a capo, la proprietà CSS consente di ritagliare il contenuto quando il contenitore è pieno. Assume due valori:

  • clip - ritaglia semplicemente il testo;
  • puntini di sospensione: aggiunge i puntini di sospensione.
#wrapper p( color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; text-overflow: ellipsis;/*Aggiungi un'ellissi*/ white-space: nowrap; /* Disabilita il ritorno a capo automatico */ overflow : nascosto;/*Nascondi tutto al di fuori del contenitore*/ )

Affinché la proprietà funzioni, l'elemento deve anche essere impostato per evitare interruzioni di riga e overflow con un valore nascosto.

Lezione 5

In questa lezione noi:
1. Scopri come rendere il codice html più comodo e facile da leggere per noi.
2. Scopriamo come avvolgere correttamente una riga di testo.

Rendere il codice html facile da usare.

Ora il nostro codice è chiaro e facile da leggere, poiché ha poco testo e quasi nessun tag. Quando creiamo una pagina più complessa, ci saranno molti tag, quindi sarà difficile trovare quello giusto.

Per evitare un pasticcio di tag, è necessario disporre inizialmente tag e linee in modo che siano più facili da percepire visivamente. Quando il browser legge le informazioni dalla pagina html, non importa quanti spazi e quante righe vuote nel codice.

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

Il codice che stiamo considerando è molto semplice, ma anche adesso la differenza nella percezione visiva è evidente. Non ci sono regole specifiche per "ripristinare l'ordine", ogni maestro decide da solo come è più conveniente per lui lavorare.

Interruzione di riga html. Il tag <br>.

Presta attenzione al disegno. Nella prima variante il testo è scritto in una riga, nella seconda variante in due righe.


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


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

<br> tag

Quando abbiamo fatto conoscenza con i tag nella terza lezione, ho menzionato che ci sono tag che non richiedono la chiusura. Etichetta <br> uno di loro, serve a rompere la linea.
Applichiamolo nel codice:

Abbiamo taggato <br> 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 in Blocco note (Ctrl + S) e aggiornare la pagina nel browser (F5).

Non solo le persone sono difficili da sopportare, ma anche le parole. Ad esempio, un composto chimico è molto simile ad alcune persone con " invertito"! Non sappiamo come affrontare personalità così difficili, ma i CSS ci aiuteranno sicuramente con il ritorno a capo automatico:

Perché sopportare l'"insopportabile"

Nella maggior parte dei casi, quando il contenuto di testo nelle pagine Web viene visualizzato in un browser, il ritorno a capo automatico non viene applicato. Se la parola non si adatta completamente all'area dello schermo, per impostazione predefinita è completamente " si sposta' alla riga successiva.

La sillabazione parziale si applica solo a parole lunghe e complesse composte da più termini e separate da un trattino. È qui che sorgono i problemi di visualizzazione di queste parole su schermi di diverse diagonali e in diversi browser. Allo stesso tempo, prevedi con precisione quanto durerà la parola " assomigliare» è difficile dal lato client, quindi specificare i trattini « manualmente" senza senso:

Risolvi il problema del ritorno a capo automatico con HTML

Prima di esaminare il wrapping di parole lunghe in CSS, diamo un'occhiata ai modi per risolvere questo problema usando il linguaggio ipertestuale.
Ci sono diverse opzioni per questo in HTML:

  • Usando il carattere soft break -- consente di impostare il punto di interruzione di una parola composta. Quando la finestra del browser viene ridimensionata, solo la parte della parola lunga dopo ­ va a capo alla riga successiva e dopo la prima metà viene visualizzato un trattino:

Un esempio di un composto chimico complesso e di un testo: acido metilpropenilene diidrossicinanomemenilacrilico

  • Usando il tag - l'elemento è stato introdotto in HTML 5. Serve anche a dire al browser dove interrompere una parola composta o lunga. Ma a differenza del precedente carattere speciale, questo tag non viene visualizzato al posto " colpa» un trattino, che può pregiudicare la leggibilità dell'intero testo:

metilpropenilene diidrossicinna acido menacrilico

Supporto dei tag in alcuni browser implementato in modo errato. Funzionerà in essi se la proprietà display con il valore inline-block è scritta per essa nel codice CSS.

Avvolgimento di parole con CSS

Prima di disabilitare il ritorno a capo automatico in CSS, diamo un'occhiata ad alcune proprietà che possono risolvere il problema principale:

  1. word-wrap - Descrive come avvolgere le parole che non rientrano nelle dimensioni del contenitore specificate. Va subito avvertito che ci sono problemi con la convalida di questa proprietà e il consorzio W3C non ha ancora deciso l'implementazione del suo supporto nei CSS. Pertanto, validatori specializzati in presenza di word-wrap nel codice genereranno un errore:

Tuttavia, questa proprietà è "accettata" da tutti i browser moderni ed è una soluzione efficace al problema del wrapping di parole lunghe. word-wrap assume i seguenti valori:

  • normale - le parole non sono avvolte;
  • break-word - a capo automatico delle parole;
  • eredita - eredita il valore del genitore.

Un esempio che illustra l'uso di questa proprietà:

acidomenilacrilico

Nella nuova specifica CSS, la proprietà word-wrap è stata rinominata overflow-wrap . Entrambe le proprietà assumono gli stessi valori. Ma il supporto per l'overflow-wrap è ancora poco implementato, quindi è meglio usare la vecchia versione della proprietà:

Come puoi vedere nello screenshot qui sopra, la nuova proprietà è supportata da Google Chrome, ma non da IE. Pertanto, l'overflow-wrap non dovrebbe essere utilizzato per racchiudere le parole nei CSS.

  1. word-break - imposta le regole per avvolgere le righe all'interno del contenitore se non si adattano in larghezza. Questa è una nuova proprietà e il supporto è stato aggiunto a CSS3. È valido, ma è progettato per funzionare con le stringhe, quindi il ritorno a capo delle parole potrebbe essere grammaticalmente errato.

La proprietà assume tre valori:

  • normale - vengono utilizzate le regole di trasferimento predefinite;
  • interruzione di parola - il ritorno a capo viene eseguito automaticamente in modo che la parola rientri nelle dimensioni del contenitore impostate dalla larghezza;
  • keep-all - Disabilita la sillabazione automatica in cinese, giapponese e coreano. Per le altre lingue, l'effetto del valore è simile al normale.

Sincrofasotrone

Stato preoccupato

Undicesima elementare

metossiclorodietilamminometilbutilammina

  1. hyphens è una nuova proprietà introdotta con il rilascio di CSS3. Imposta come il browser avvolgerà le parole nel testo di output. La proprietà assume diversi valori:
  • nessuno: disabilita il ritorno a capo automatico nei CSS;
  • Manuale ( valore di default) - le parole vengono racchiuse in quelle parti del blocco di testo in cui è specificato utilizzando il tag o involucro morbido (-) ;
  • auto - Il browser avvolge automaticamente le parole in base alle sue impostazioni.

Per il corretto funzionamento della proprietà nel tag o

L'attributo lang deve essere presente con il valore "ru" (lang="ru").

La proprietà è supportata dalle ultime versioni di IE, Opera e Firefox. Ognuno di loro ha la propria linea di CSS. I trattini non sono supportati da Google Chrome. Esempio:

acidomenilacrilico

Divieto di a capo automatico

A volte è necessario assicurarsi che la linea venga visualizzata completamente senza interruzioni. Il divieto di a capo automatico in css può essere implementato in diversi modi:

  • Con uno spazio unificatore   , impostato su interruzioni di riga o interruzioni di parola;
  • Impostando la proprietà spazio bianco significato " ora rap» ( spazio bianco: nowrap ).

Esempio di implementazione:

tempi di acidomenilacrilico

metilpropenildue

acido metilpropeniltre

acido metilpropenilquattro

Ora puoi avvolgere anche le parole più lunghe con CSS. Ma dovrai affrontare il problema delle persone intollerabili da solo. Cerca di influenzarli con i metodi CSS

Vlad Merzevich

A differenza del testo nell'industria della stampa, la sillabazione viene utilizzata raramente su una pagina Web, poiché non siamo rigidamente legati al formato cartaceo. I siti possono essere visualizzati su diversi monitor, con diverse risoluzioni, in diversi sistemi operativi e browser. Tutto ciò genera una tale combinazione di combinazioni che è impossibile prevedere come apparirà il testo finale per l'utente. Per questo motivo, di solito il testo è allineato a sinistra e la sillabazione avviene in parole intere. Tuttavia, il wrapping delle parole è necessario in alcuni casi, ad esempio, quando vengono utilizzati termini chimici o medici lunghi, in colonne strette di una determinata larghezza, per motivi estetici. In HTML e CSS, non ci sono molti modi manuali o automatici per aggiungere trattini, quindi li elencherò tutti.

Utilizzo dei tag

Etichetta introdotto in HTML5 e crea il ritorno a capo automatico quando necessario. In quei luoghi in cui, secondo le regole della lingua russa, la sillabazione è accettabile, inseriamo (Esempio 1). Se l'intera parola rientra nella larghezza assegnata, questo tag non si mostrerà in alcun modo e non sapremo nemmeno della sua presenza. Se la parola non si adatta, il browser nella posizione del tag crea un trasferimento.

Esempio 1. Etichetta

Trasferimenti

Uno superclasse La figlia di Anzhelika, dopo essersi diplomata a scuola, ha scelto la professione di imprenditore prod autista fili.

Il risultato di questo esempio è mostrato in Fig. uno.

Riso. 1. Testo con a capo automatico

Trasferimento morbido

Applicazione ha un grave inconveniente: è impossibile capire se il trasferimento è davanti a noi o una singola parola su un'altra riga. Per questo motivo, il significato della frase può essere perso e frainteso. I trasferimenti devono essere eseguiti secondo le regole della tipografia, ovvero: aggiungere un trattino alla fine della riga. La sillabazione morbida fa un ottimo lavoro con questo, nel codice HTML c'è un carattere speciale per esso - . Svolge lo stesso ruolo del tag - non è visibile nel testo normale e fa scorrere la parola su un'altra riga, aggiungendo un trattino (esempio 2).

Esempio 2: Trasferimento graduale

Trasferimenti

Anzhelika, una studentessa dell'undicesimo anno, dopo essersi diplomata a scuola, ha scelto la professione di imprenditore.

Il risultato di questo esempio è mostrato in Fig. 2. Notare quanto più estetico e comprensibile il testo abbia cominciato ad apparire rispetto alla fig. uno.

Riso. 2. Testo con a capo automatico

proprietà word-break

Per automatizzare il processo di creazione dei trattini, utilizzare la proprietà word-break con il valore break-all (esempio 3). Non devi più aggiungere simboli o tag all'HTML, gli stili si occupano di tutto.

Esempio 3: utilizzo dell'interruzione di parola

Trasferimenti

Angelica, l'undicesima elementare, dopo essersi diplomata a scuola, ha scelto la professione di impiegata.

Il risultato di questo esempio è mostrato in Fig. 3. Le regole di sillabazione del testo non vengono prese in considerazione in questo caso, quindi le parole possono essere sillabate in un modo molto bizzarro.

Riso. 3. Testo con a capo automatico

Di tutti i metodi elencati, l'uso "semi-manuale" - dà il miglior risultato - si osservano le regole della lingua russa, il testo sembra esteticamente più gradevole. Usalo quando ci sono parole lunghe nel testo.

proprietà trattini

Infine, la proprietà più potente e conveniente per aggiungere automaticamente i trattini è hyphens . La sua azione si basa sul dizionario di sillabazione integrato nel browser, quindi fornisce il miglior risultato. Supportato in IE10, Firefox, Android e iOS. Chrome e Opera non supportano. Perché funzioni, per il tag aggiungi l'attributo lang con il valore ru (esempio 4).

Esempio 4 Utilizzo dei trattini

Trasferimenti

Angelica, l'undicesima elementare, dopo essersi diplomata a scuola, ha scelto la professione di impiegata.

Il risultato di questo esempio è mostrato in Fig. quattro.

Riso. 4. Testo con a capo automatico

Divieto di trasferimento

Abbastanza spesso sorge anche il problema inverso: vietare la sillabazione in quei luoghi in cui, secondo le regole della lingua, sono inaccettabili. Ad esempio, non è possibile separare le unità di misura da un numero (10 ml), una designazione di anno (54 aC), iniziali da un cognome, abbreviazioni stabili (ecc.), ecc. Per evitare che il browser aggiunga trattini nello spazio , deve essere sostituito con uno spazio unificatore (esempio 5).

Esempio 5 Utilizzo

Trasferimenti

Lago alle coordinate 70° 58′ 19″ N. sh. 97° 24′ 5″ E Il villaggio si trova nel distretto di Taimyrsky Dolgano-Nenetsky nel territorio russo di Krasnoyarsk.

In questo esempio, per la corretta scrittura delle coordinate, viene utilizzato il quale non consente il ritorno a capo del testo.

Articoli correlati in alto