10 prill 2016

Përshëndetje). Unë vazhdoj të shkruaj për vetitë e ndryshme të dobishme të gjuhës css, të cilat në një mënyrë ose në një tjetër mund të ndihmojnë me paraqitjen. Dhe sot dua t'ju tregoj se si t'i mbështillni fjalët në css nëse ato nuk futen në enën e tyre. Unë do t'ju tregoj gjithçka me një shembull të vërtetë.

Aktivizo vizë për fjalët që nuk përshtaten

Le të themi se kam një bllok me një gjerësi prej 100 pikselësh dhe më duhet të shkruaj një tekst në të. Ka një fjalë në tekst "vetë-nxjerrja". Ky është arkivi, për shembull) Por nuk është kjo gjëja. Fjala është shumë e gjatë, thjesht nuk do të futet në enë në gjerësi. Le ta shkruajmë në një bllok kaq të ngushtë (100 piksele). Çfarë do të ndodhë?

Siç e shihni, fjala e gjorë është zvarritur nga kontejneri, mirë, nuk ka ku të shkojë, çfarë të bëni. Dhe kjo është pa vrima. Pra, këtu vjen në shpëtim vetia e mbështjelljes së fjalëve. Ja çfarë ju nevojitet për të vendosur bllokun për të mundësuar mbështjelljen e fjalëve në të:

Fjala-mbështjellje: thyer-fjalë;

Dhe për bindje, mund të përshkruani edhe dhëmbëza të brendshme (mbushje). Pra, pas aplikimit të vetive, shohim se fjalët shumë të gjata do të shkruhen në një rresht tjetër. Për më tepër, edhe nëse rreshti i dytë nuk mjafton për një fjalë, atëherë pjesa tjetër e tij do të transferohet në të tretën, e kështu me radhë.

Dua të theksoj se prona mund të përdoret pa frikë. Së pari, sot funksionon mirë në shfletues. Së dyti, funksionon zgjuar. Domethënë, për të gjitha fjalët normale nuk do të ketë vizë, të gjitha fjalët do të kalojnë në rreshtin tjetër, kështu që lexueshmëria nuk do të shqetësohet. Mund ta shihni në këtë pamje të ekranit.

Kur të përdoret mbështjellja e fjalëve

Në fakt, ndërsa unë shoh 2 opsione për përdorim. E para është vetëm për blloqe të ngushta, ku keni frikë se fjalët e gjata mund të zvarriten në mënyrë të shëmtuar nga kufijtë e bllokut. E dyta është kur projektuesi konceptoi në mënyrë që emri i faqes të ishte në disa rreshta.

Pra, në këtë artikull, ne mësuam se si të bëjmë mbështjelljen e fjalëve në css. Kaq kam sot. Shihemi.

Mësimi 5

Në këtë mësim ne:
1. Mësoni se si ta bëni kodin html më të përshtatshëm dhe të lehtë për t'u lexuar për ne.
2. Le të kuptojmë se si të mbështjellim siç duhet një rresht teksti.

Bërja e kodit html miqësor për përdoruesit.

Tani kodi ynë është i qartë dhe i lehtë për t'u lexuar, pasi ka pak tekst dhe pothuajse asnjë etiketë. Kur krijojmë një faqe më komplekse, do të ketë shumë etiketa, kështu që do të jetë e vështirë të gjesh atë të duhurin.

Për të shmangur një rrëmujë të etiketave, fillimisht duhet të rregulloni etiketat dhe linjat në mënyrë që ato të jenë më të lehta për t'u perceptuar vizualisht. Kur shfletuesi lexon informacion nga faqja html, nuk ka rëndësi se sa hapësira dhe sa rreshta bosh në kod.

E ndryshova tekstin në kodin e faqes në krahasim me atë që krijuam, por nuk ka rëndësi. Shifrat majtas dhe djathtas tregojnë të njëjtin kod. Të dy opsionet do të shfaqen nga shfletuesi në ekranin e monitorit në të njëjtën mënyrë. Pajtohem, do të jetë shumë më e lehtë të punosh me kodin e treguar në të djathtë sesa me atë në të majtë.

Kodi që po shqyrtojmë është shumë i thjeshtë, por edhe tani dallimi në perceptimin vizual është i dukshëm. Nuk ka rregulla specifike për "rikthimin e rendit", secili mjeshtër vendos vetë se si është më i përshtatshëm për të të punojë.

Ndërprerja e rreshtit html. Etiketa <br>.

Kushtojini vëmendje vizatimit. Në variantin e parë teksti shkruhet në një rresht, në variantin e dytë me dy rreshta.

Shfletuesi do t'i shfaqë të dy opsionet në të njëjtën mënyrë. Teksti do të shkruhet në një rresht:

Pse është kështu, ju pyesni? Në të vërtetë, në një nga kodet, një pjesë e tekstit transferohet në një rresht tjetër. Do të ishte logjike nëse një pjesë e tekstit në shfletues do të kalonte gjithashtu në një rresht tjetër, por html ka logjikën e vet në këtë drejtim. Nëse bëjmë një thyerje rreshti në kodin html, atëherë për shfletuesin kjo është e barabartë me një hapësirë(si një hapësirë ​​normale midis fjalëve në tekst). Nëse një pjesë të tekstit e transferojmë jo një rresht poshtë, por 2 ose 3 (çdo numër), atëherë shfletuesi do ta konsiderojë këtë distancë si një hapësirë ​​të zakonshme midis fjalëve dhe kur të shfaqet në ekran, teksti do të shkruhet në një rresht. .

etiketa <br>

Kur u njohëm me etiketat në mësimin e tretë, përmenda se ka etiketa që nuk kërkojnë mbyllje. Etiketë <br> njëri prej tyre, shërben për të thyer vijën.
Le ta zbatojmë atë në kod:

Ne kemi etiketuar <br> në kodin tonë html, dhe tani kur skedari hapet përmes shfletuesit, një pjesë e tekstit do të transferohet në rreshtin tjetër.
* Mos harroni të ruani ndryshimet në Notepad (Ctrl + S) dhe të rifreskoni faqen në shfletues (F5).

Kur shtrojnë, webmasterët kanë periodikisht një pyetje: si do të mbështillet teksti? Në shumicën e rasteve, shfletuesi e trajton këtë detyrë vetë. Por ndonjëherë ky proces duhet të merret nën kontroll, veçanërisht kur formohen fjalë dhe fraza të gjata që, nëse transferohen gabimisht, humbasin kuptimin e tyre.

veti fjalë-mbështjellëse

Në HTML, ekziston një etiketë e veçantë për ndarjen e linjave.
. Por përdorimi shumë i shpeshtë i tij konsiderohet një formë e keqe midis zhvilluesve dhe shpesh tregon joprofesionalizëm. Si provë, imagjinoni se keni një logo dhe dëshironi që çdo shkronjë të fillojë në një rresht të ri:

Rezultati është kod i rëndë dhe i shëmtuar, nga i cili çdo zhvillues do të ketë një goditje kulturore. Dhe çfarë nëse dëshironi që logoja të shfaqet horizontalisht në versionin e desktopit, por vertikalisht nëse gjerësia e ekranit është më pak se 550 px? Prandaj, përdorni gjithmonë fletë stili kaskadë për të personalizuar pamjen e elementeve. Për më tepër, me ndihmën e mjeteve CSS, ndërprerjet e linjës kryhen në një mënyrë më elegante. Në të njëjtën kohë, nuk ka asnjë shënim të tepërt, i cili vetëm zvogëlon shpejtësinë e ngarkimit të faqeve.

Vetia e parë që duhet parë për përpunimin e tekstit është mbështjellja e fjalëve. Ajo merr tre vlera: normale, break-all dhe mbaj-all. Ju vetëm duhet të mbani mend të thyeni gjithçka për të punuar. Normal është parazgjedhja dhe nuk ka kuptim ta specifikoni atë. Keep-all mjetet për të parandaluar ndërprerjet e linjës në një dokument CSS. Projektuar posaçërisht për karaktere kineze, japoneze dhe koreane. Pra, nëse nuk do të bëni blog në asnjërën nga ato gjuhë, nuk do t'ju duhet veçoria. Gjithashtu nuk mbështetet nga shfletuesi Safari dhe telefonat celularë iOS.

Për të caktuar një rresht të ri për secilën shkronjë në logon nga shembulli i mëparshëm duke përdorur CSS, duhet të shkruani kodin e mëposhtëm:

P( font: bold 30px Helvetica, sans-serif; gjerësia: 25px; word-wrap: break-all; )

Gjerësia dhe madhësia e shkronjave zgjidhen në atë mënyrë që të ketë hapësirë ​​të mjaftueshme vetëm për një shkronjë. Fjala-mbështjellja me një vlerë të thyer-të gjitha i thotë shfletuesit që ta mbështjellë fjalën në një rresht të ri çdo herë. Kjo pronë nuk mund të quhet e pazëvendësueshme. Por do të jetë i dobishëm kur dizajnoni blloqe të vogla me tekst, siç janë fushat e komenteve.

pronë e hapësirës së bardhë

Një gabim i zakonshëm që bëjnë zhvilluesit fillestarë të uebit është që përpiqen të modifikojnë tekstin me hapësira ose shtypin tastin Enter dhe më pas pyesin veten pse përpjekjet e tyre nuk shfaqen në faqe. Pavarësisht se sa herë shtypni "Enter", shfletuesi do ta injorojë atë. Por ka një mënyrë për ta bërë atë të shfaqë tekstin ashtu siç dëshironi dhe të marrë parasysh të gjithë hapësirën.

Në një dokument CSS, ndërprerjet e rreshtave, të caktuara me veçorinë e hapësirës së bardhë, mund të konfigurohen për të respektuar hapësirat ose duke shtypur tastin Enter. Hapësira e bardhë me vlerën e vijës paraprake do të bëjë që shfletuesi të shohë Enter në tekst.

Nëse e ndryshoni linjën paraprake në para-mbështjellje në kodin tuaj CSS, mbështjellja e linjës do të përfshijë hapësira. Në të kundërt, çaktivizoni çdo mbështjellje duke vendosur veçorinë e hapësirës së bardhë në tekst me vlerën nowrap:

#wrapper p (ngjyra: #FFF; mbushje: 10 px; font: bold 16px Helvetica, sans-serif; hapësirë ​​e bardhë: nowrap; )

tekst-mbushje

Një tjetër mjet i dobishëm për të punuar me tekst është teksti-overflow. Përveç mbështjelljes së rreshtit, vetia CSS lejon që përmbajtja të pritet kur kontejneri është plot. Merr dy vlera:

• clip - thjesht klip tekstin;
• elipsis - shton një elipsë.

#wrapper p( ngjyra: #FFF; mbushje: 10 px; font: bold 16px Helvetica, sans-serif; text-overflow: elipsis;/*Shto një elipsë*/ hapësirë ​​të bardhë: nowrap; /* Çaktivizo mbështjelljen e rreshtit */ tejmbushje : i fshehur;/*Fshih gjithçka jashtë kontejnerit*/ )

Në mënyrë që vetia të funksionojë, elementi duhet gjithashtu të vendoset për të parandaluar prishjen e linjës dhe tejmbushjen me një vlerë të fshehur.

Shpesh ka nevojë për të shtuar një paragraf të ri, por pa rreshtin bosh që fut etiketa e paragrafit

Për disa fragmente teksti, intervalet standarde të miratuara për paragrafët janë thjesht të papërshtatshme. Këto mund të jenë mbishkrime nën fotografi dhe në tabela, poezi, citate, fusnota dhe shënime.

Për mbështjelljen e detyruar të rreshtit, sigurohet një etiketë e veçantë, funksioni i së cilës është ngulitur në emrin e saj br (break rreshti - "thye një rresht, rresht"). Etiketë
Gjuha e shënjimit të hipertekstit html do të thotë që e gjithë përmbajtja e mëposhtme duhet të fillojë në një linjë të re. Nëse është e nevojshme, mund të vendosni disa etiketa me radhë për të arritur hapësirën e dëshiruar.

Etiketë
nuk është i ndjeshëm ndaj shkronjave të vogla dhe nuk kërkon një etiketë mbyllëse sepse është një element bosh, por është më mirë të mësohesh të mbyllësh të gjitha etiketat. Në XHTML, etiketa e ndërprerjes duhet të jetë "e mbyllur fort" me një vijë të prapme.

Shembull i etiketës së thyerjes