Buna ziua tuturor!). Continuă să scriu despre diferitele proprietăți utile ale limbajului css, care pot ajuta într-un fel cu aspectul. Și astăzi vreau să-ți spun cum să faci în wrap-ul cuvântului CSS, dacă nu intră în containerul tău. Vă voi arăta totul pe un exemplu real.
Activați transferul pentru cuvinte care nu se potrivesc
Să spunem că am un bloc care are o lățime de 100 de pixeli și trebuie să scriu un text în el. În text vine cuvântul "auto-extragere". Aceasta este o arhivă, de exemplu) Dar nu esența. Cuvântul este foarte lung, doar că nu se potrivește în container în lățime. Să scriem într-un bloc atât de îngust (100 pixeli). Ce se va întâmpla?
După cum puteți vedea, cuvântul sărac a ieșit din container, nu mai are de unde să meargă, ce puteți face. Și aceasta nu are indentare. Deci, aici vine ajutorul cuvântului-wrap proprietate. Iată ce aveți nevoie pentru a seta blocul pentru a include cuvântul de ambalaj în el:
Și pentru persuasivitate, puteți specifica și umplutura interioară (padding). Deci, după aplicarea proprietății, vedem că vor fi transmise cuvinte prea lungi peste scrisori pe altă linie. Mai mult, chiar dacă a doua linie nu este suficientă pentru cuvânt, restul va fi transferat la al treilea și așa mai departe.
Vreau să observ că proprietatea poate fi folosită fără teamă. În primul rând, astăzi funcționează bine în browsere. În al doilea rând, funcționează pe smart. Anume, pentru toate cuvintele normale, nu va mai fi nici o despărțire, întregul cuvânt va fi transferat la următoarea linie, astfel încât citirea nu este încălcată. Puteți vedea acest lucru pe acest ecran.
Când să folosești cuvântul-wrap
De fapt, în timp ce văd două opțiuni de utilizare. Primul este doar pentru blocuri înguste, unde vă este frică că cuvintele lungi pot merge urât dincolo de limitele blocului. Al doilea este atunci când designerul a conceput astfel încât numele site-ului a fost în câteva rânduri.
Deci, în acest articol am învățat cum să facem wrap wrap în css. Pe asta am totul astăzi. Ne vedem curând.
Ați putea fi, de asemenea, interesat
Articole similare
Trimiteți-le prietenilor: