Învățare forțată de cuvinte CSS. Înfășurarea cuvintelor lungi cu CSS

Internetul este format din conținut, conținutul este format din cuvinte, iar cuvintele pot fi foarte, foarte lungi. Și mai devreme sau mai târziu, webmasterul se confruntă cu problema divizării cuvintelor lungi. Această problemă este valabilă mai ales pentru designul receptiv și pentru blocurile mici de conținut. Deci, cum faceți față acestei probleme?

Cratimă

Prima soluție pentru cratimarea cuvintelor lungi este cu cratimă.

Defisi (-webkit-cratime: auto; -moz-cratime: auto; -ms-cratime: auto; cratime: auto;)

Suport pentru browser: cratimele CSS sunt acceptate de aproape toate browserele moderne, cu excepția Chrome, Opera, Android. De asemenea, foarte des se introduce o cratimă în locuri greșite din punct de vedere gramatical.

Pauză cuvânt

Word break este o proprietate CSS care specifică dacă trebuie să rupi liniile din cuvinte.

Obriv-slova (-ms-word-break: break-all; word-break: break-all; word-break: break-word;)

Suport pentru browser: Word break este acceptat în toate browserele, cu excepția Opera Mini și a versiunilor mai vechi de Opera.

Înveliș de preaplin

Următoarea soluție este utilizarea overflow-wrap.

Obertka-perepolneniya (word-wrap: break-word; overflow-wrap: break-word;)

Suport pentru browser: acceptat în aproape toate browserele. Notă: Unele browsere necesită utilizarea „word-wrap” în loc de „overflow-wrap”.

Elipsă

O altă opțiune este de a utiliza puncte de suspensie.

Mnogotochiye (overflow: ascuns; white-space: nowrap; text-overflow: elipsis;)

Suport pentru browser: acceptat de toate browserele moderne.

Aceasta este o metodă de lucru, dar departe de a fi perfectă.

Soluție finală: Folosind Overflow și Hyphen Wrapper.

Finalnoye-resheniye (overflow-wrap: break-word; word-wrap: break-word; -webkit-cratime: auto; -ms-cratime: auto; -moz-cratime: auto; cratime: auto;)

Această soluție va permite browserului care îl acceptă să introducă o cratimă și, pentru browserele care nu suportă, să introducă o întrerupere de linie.

Stabiliți cum să înfășurați cuvinte lungi:

1. numai acolo unde există o liniuță, spațiu sau Enter (cu excepția spațiului care nu se rupe și cratima care nu se rupe -). O cratimă este scrisă între părți ale unui cuvânt (de exemplu, roșu și galben), între cuvinte - o liniuță. „Cratimă moale” - apare numai atunci când este necesară cratimarea. Dacă cuvântul este în afara sferei părintelui, atunci sau transferă o parte din ea fără o liniuță. Minusul este utilizat în expresiile matematice (de exemplu, 5 - 2). În numerele de telefon este afișată o linie digitală (de exemplu, +7 800 000‒00‒00). Și toate acestea nu sunt atât de familiare - asta este pe tastatură.
2. după orice personaj.
3. conform regulilor limbii ruse cu cratimare automată.

overflow-wrap
word-wrap
pauză de cuvinte
linie-break
cratime

o mie nouă sute nouăzeci și nouă kilograme au fost deja reexaminate grubber-buldozer-loader

Care este diferența dintre o proprietate și alta

În mod implicit, cuvintele lungi nu sunt cratimate cu excepția cazului în care sunt indicate în mod explicit printr-o cratimă și încep pe o nouă linie.

Pentru a ignora liniile imediat vizibile ochiului, adăugăm word-break: keep-all; ...

Pentru a împiedica browserul să acorde atenție cratimei moi, introducem cratime: niciuna; ...

Dacă este necesară învelirea cuvântului, atunci înfășurarea cuvântului: pauză-cuvânt; Vă sfătuiesc să îl folosiți întotdeauna, deoarece este înțeles de toate browserele. Se deosebește de pauză de cuvinte: pauză-tot; care este prioritizat prin faptul că cuvintele care nu se încadrează în bloc încep pe o nouă linie și recomandarea de cratimă moale este respectată.

Când este folosit împreună, pauză de cuvânt: pauză-tot; cu cratime: auto; , acesta din urmă este ignorat. cratime: auto; pune orice cratime după cum consideră potrivit. Dar pentru a funcționa, trebuie să vă desemnați limba specificând atributul lang = "ru" în div.

Nu înfășurați cuvintele pe o altă linie

Să presupunem că un element de meniu sau un buton nu arată bine dacă se rupe. Prin urmare, este necesar să se interzică separarea lor. Pentru aceasta, toate proprietățile de mai sus trebuie setate la modul „implicit” și adăugate. Faceți clic pe și uitați-vă la poligonul nostru.

Controlează înfășurarea cuvintelor atunci când cratimele: auto;

Tetrahidropiranilciclopentiltetrahidropiridopiridin

Bună ziua tuturor). Continu să scriu despre diferite proprietăți utile ale limbajului CSS care pot ajuta într-un fel sau altul în aspect. Și astăzi vreau să vă spun cum să înfășurați cuvinte în CSS dacă acestea nu se încadrează în containerul dvs. Îți voi arăta totul cu un exemplu real.

Activați cratima pentru cuvintele care nu se potrivesc

Să presupunem că am un bloc de 100 de pixeli lățime și trebuie să scriu un text în el. Textul conține cuvântul „ autoextragere". Aceasta este o arhivă, de exemplu) Dar nu este vorba. Cuvântul este foarte lung, pur și simplu nu se va potrivi în lățimea containerului. Să o scriem într-un bloc atât de îngust (100 pixeli). Ce se va intampla?

După cum puteți vedea, bietul cuvânt a ieșit din container, ei bine, nu are încotro, ce poți face. Și acest lucru este fără indentare. Așadar, aici proprietatea „wrap-wrap” vine în ajutor. Iată ce trebuie să cereți unui bloc pentru a activa word wrap în acesta:

Word-wrap: break-word;

Și pentru convingere, puteți adăuga și căptușeală. Deci, după aplicarea proprietății, vedem că cuvintele care sunt prea lungi vor fi împachetate literă cu literă pe o altă linie. Mai mult, chiar dacă a doua linie nu este suficientă pentru un cuvânt, restul acesteia va fi transferată la a treia etc.

Aș dori să subliniez că proprietatea poate fi folosită în siguranță. În primul rând, funcționează excelent în browserele de astăzi. În al doilea rând, funcționează inteligent. Și anume, pentru toate cuvintele normale, nu va exista cratimă, cuvintele întregi vor fi transferate pe rândul următor, astfel încât lizibilitatea nu va fi afectată. O puteți vedea în această captură de ecran.

Când se folosește word-wrap

De fapt, până acum văd 2 cazuri de utilizare. Primul este doar pentru blocuri înguste, unde vă temeți că cuvintele lungi ar putea să urce urât în ​​afara granițelor blocului. Al doilea este atunci când designerul a conceput astfel încât numele site-ului să fie în mai multe rânduri.

Deci, în acest articol, am învățat cum să facem word wrap în css. Asta e tot pentru mine astăzi. Te văd.

Bună ziua tuturor și să începem. Să presupunem că avem următorul text:

Guvernul Emiratelor Arabe Unite și administrația concentrează în acest oraș toate cele mai noi tehnologii bazate pe cele mai recente realizări ale științei și tehnologiei, încercând să-și transforme orașul viitorului, de parcă ar fi ieșit de pe ecranul unor filme science fiction. Aceste tehnologii includ roboți de poliție, mașini robotizate și sistemul de transport Hyperloop și, într-un viitor nu prea îndepărtat, va începe să funcționeze un serviciu de taxi cu zbor automat în Dubai. Și în pregătirea acestui eveniment, Volocopterul electric cu două locuri cu 18 rotoare, care va fi folosit ca taxi, a făcut primul său zbor în modul automat, scriu ...

aici am indicat un text cu care vom începe acum să lucrăm.

Și prima proprietate pe care o vom lua în considerare se numește word-break.

word-break: normal | păstrează-toate | spargere

Suntem interesați în principal de două valori ale acestei proprietăți normale - valoarea implicită și break-all cu care setăm că înfășurarea cuvântului se efectuează caracter cu caracter. Pentru a păstra totul, această valoare este utilizată pentru a înfășura cuvinte în chineză, japoneză și coreeană.

P (word-break: break-all;.)

Vă rugăm să rețineți că, după aplicarea acestui stil, tot textul nostru este întins la toată lățimea disponibilă și cratima se efectuează nu prin cuvinte, ci prin caractere. Această proprietate poate fi utilă atunci când avem un cuvânt foarte lung care nu se încadrează în lățimea dată. Cu toate acestea, acest lucru creează un fel de inconvenient, deoarece absolut toate cuvintele sunt transferate caracter cu caracter, chiar și cele care se încadrează în lățimea dată.

Din fericire, există o proprietate similară care transferă numai cuvinte care nu se potrivesc peste caractere. Se numește overflow-wrap:

P (overflow-wrap: break-word;)

iar după aplicarea cuvântului break-word, tot textul nostru este înfășurat de cuvinte, iar cuvintele care nu se încadrează în lățimea dată sunt înfășurate caracter cu caracter. Putem spune că sarcina este finalizată! În plus față de valoarea „break-word”, această proprietate acceptă:

overflow-wrap: normal | break-word | moşteni;

Acum să trecem la proprietatea CSS mai avansată pentru înfășurarea cuvântului în text.

Luați în considerare proprietatea spațiului alb cu care putem simula activitatea etichetei pre fără a schimba textul în sine în monospațiu.

spațiu alb: normal | nowrap | pre | pre-linie | pre-wrap | moşteni

De fapt, folosind această proprietate, lucrăm doar cu spații din text. De exemplu, dacă aplicăm următorul stil textului nostru:

Spațiu alb: nowrap;

toate întreruperile de linie vor fi ignorate și textul nostru va fi afișat ca o singură linie.

Spațiu alb: pre;

În cazul pre, toate întreruperile de linie vor fi la fel ca în codul sursă. Mai mult, dacă textul nu se încadrează în lățimea specificată, atunci nu va fi înfășurat. Dacă dorim ca acesta să fie reportat, atunci trebuie să specificăm valoarea pre-linie.

Dacă vrem să luăm în considerare nu numai întreruperile de linie din codul sursă, ci și spațiile dintre cuvinte, atunci trebuie să specificăm:

Spațiu alb: pre-împachetare;

Acesta este practic tot ce am vrut să vă spun despre Word Wrap folosind CSS. Sper că acest articol a fost util pentru dvs. și veți folosi cunoștințele acumulate de mai multe ori.

Ei bine, îmi iau rămas bun de la tine. Vă doresc succes și mult succes! Pa!

În timpul aspectului, editorii au periodic o întrebare: cum se va efectua transferul de text? În majoritatea cazurilor, browserul gestionează această sarcină de unul singur. Dar, uneori, acest proces trebuie controlat, în special prin proiectarea de cuvinte și fraze lungi care, dacă sunt incorect împărțite, își pierd sensul.

Proprietatea word-wrap

În HTML, există o etichetă specială pentru separarea șirurilor
... Dar utilizarea sa prea frecventă este considerată o formă proastă în rândul dezvoltatorilor și indică adesea neprofesionalism. Drept dovadă, imaginați-vă că aveți un logo și doriți ca fiecare literă să înceapă pe o nouă linie:

Rezultatul este un cod greoi și urât, care va oferi oricărui dezvoltator un șoc cultural. Și ce se întâmplă dacă doriți ca sigla să fie orizontală în versiunea desktop și pe verticală atunci când ecranul are o lățime mai mică de 550 de pixeli? Prin urmare, utilizați întotdeauna foi de stil în cascadă pentru a personaliza aspectul elementelor. Mai mult, cu ajutorul instrumentelor CSS, întreruperile de linie se fac într-un mod mai elegant. În același timp, nu există nici o marcare excesivă, ceea ce doar încetinește viteza de încărcare a paginii.

Prima proprietate care trebuie analizată pentru procesarea textului este word-wrap. Acceptă trei valori: normal, break-all și keep-all. Trebuie doar să vă amintiți totul pentru a lucra. Normal este valoarea implicită și nu are rost să o specificați. Keep-all înseamnă nicio întrerupere de linie în documentul CSS. Conceput special pentru caracterele chinezești, japoneze și coreene. Prin urmare, dacă nu intenționați să faceți bloguri în oricare dintre aceste limbi, proprietatea nu vă va fi utilă. De asemenea, nu este acceptat de browserul Safari și de telefoanele mobile iOS.

Pentru a atribui o întrerupere de linie fiecărei litere logo-ului din exemplul anterior folosind CSS, trebuie să scrieți următorul cod:

P (font: bold 30px Helvetica, sans-serif; lățime: 25px; word-wrap: break-all;)

Lățimea și dimensiunea fontului sunt selectate astfel încât să existe suficient spațiu pentru o singură literă. Word-wrap cu o valoare completă îi spune browserului să împacheteze cuvântul pe o nouă linie de fiecare dată. Această proprietate nu poate fi numită de neînlocuit. Dar este util când proiectați blocuri mici cu text, de exemplu, câmpuri pentru introducerea comentariilor.

Proprietate de spațiu alb

O greșeală obișnuită pentru dezvoltatorii web novici este încercarea de a edita text cu spații sau apăsând Enter și apoi să mă întreb de ce eforturile lor nu sunt vizibile pe pagină. Indiferent de câte ori ați apăsat Enter, browserul îl va ignora. Dar există o modalitate de a-l face să afișeze textul așa cum doriți și ținând cont de toate spațiile.

Într-un document CSS, întreruperile de linie alocate utilizând proprietatea de spațiu alb pot fi configurate pentru a ține cont de spații sau apăsați Enter. Spațiul alb cu valoarea pre-linie va forța browserul să vadă Enter în text.

Dacă schimbați linia pre-linie pentru a preînfășura codul CSS, întreruperile de linie vor lua în considerare spațiile. În schimb, interzice orice cratimare setând proprietatea spațiului alb cu valoarea nowrap la text:

#wrapper p (color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; white-space: nowrap;)

Text-overflow

Un alt instrument util pentru lucrul cu textul este text-overflow. În plus față de întreruperile de linie, proprietatea CSS permite conținutul să fie tăiat atunci când containerul este plin. Este nevoie de două valori:

• clip - doar taie textul;
• elipsă - adaugă elipsă.

# pachet de p ascuns; / * Ascundeți totul în afara containerului * /)

Pentru ca proprietatea să funcționeze, elementului trebuie să i se atribuie și întrerupere de linie și depășire cu valoarea ascunsă.