Mos e mbështillni html në një rresht të ri. Opsionet bazë për zgjidhjen e problemit të mbështjelljes së fjalëve në CSS

Përcaktoni mënyrën e transferimit fjalë të gjata:

1. vetëm aty ku ka një vizë, hapësirë ​​ose Enter (përjashtuar, hapësirën që nuk prishet dhe vizën që nuk prishet ‑). Një vizë shkruhet midis pjesëve të një fjale (për shembull, e kuqe-verdhë), dhe një vizë shkruhet midis fjalëve. "Vizë e butë" - shfaqet vetëm kur një transferim është i nevojshëm. Nëse fjala shkon përtej prindit, atëherë ose transferon pjesën e saj pa rresht. NË shprehjet matematikore përdoret minus (për shembull, 5 − 2). Numrat e telefonit shfaqin një shirit shifrash (për shembull, +7 800 000‒00‒00). Dhe e gjithë kjo nuk është e njëjta gjë e njohur që është në tastierë.
2. pas çdo personazhi.
3. sipas rregullave të gjuhës ruse me aplikim automatik vizë ndarëse.

vërshoj-mbështjell
fjalë-mbështjellje
thyerje fjalësh
ndërprerje e linjës
viza

njëmijë e nëntëqind e nëntëdhjetë e nëntë kilogramët tanë tashmë janë riinspektuar ngritës-buldozer-ngarkues

Cili është ndryshimi midis një prone dhe një tjetër?

Si parazgjedhje, fjalët e gjata nuk mbështillen nëse nuk specifikohen udhëzime të qarta duke përdorur një vizë dhe duke filluar në një linjë të re.

Për të injoruar vizat, menjëherë të dukshme për syrin, shtoni fjalë-break: mbaj-të gjitha; .

Për të parandaluar që shfletuesi t'i kushtojë vëmendje vizës së butë, futni vizat: asnjë; .

Nëse kërkohet mbështjellja e fjalëve, atëherë mbështjellja e fjalës: thyer-fjalë; Unë ju këshilloj që ta përdorni gjithmonë, pasi kuptohet nga të gjithë shfletuesit. Ndryshon nga fjalë-break: thye-all; , e cila ka përparësi në atë që fjalët që nuk përshtaten në bllok fillojnë në një rresht të ri dhe merret parasysh rekomandimi i vijës së butë.

Në ndarjen fjalë-break: thyej-të gjitha; me viza: auto; , kjo e fundit është injoruar. viza: auto; Vendos çdo vizë në diskrecionin e saj. Por në mënyrë që ai të funksionojë, ju duhet të tregoni gjuhën tuaj duke specifikuar atributin lang="ru" në div.

Mos i mbështillni fjalët në një rresht tjetër

Le të themi se një artikull ose buton i menusë nuk do të duket mirë nëse ndahet. Prandaj, ndarja e tyre duhet të ndalohet. Për ta bërë këtë, të gjitha vetitë e mësipërme duhet të vendosen në modalitetin "default" dhe të shtohen. Klikoni dhe shikoni terrenin tonë të stërvitjes.

Kontrollo mbështjelljen e fjalëve me viza: auto;

Tetrahidropiranilciklopentiltetrahidropiridopiridina

Ne vazhdojmë të eksplorojmë aftësitë e CSS3 dhe mbështjellja e fjalëve është e radhës. Mbështjellja e fjalëve është një veçori shumë e dobishme sepse e bën tekstin të duket më i bukur në faqe. Gjithashtu, ndonjëherë ju duhet të bëni kolona si në gazeta, dhe pastaj shtrirja djathtas ose majtas duket e shëmtuar. Por nëse e shtrini në të gjithë gjerësinë e kolonës, atëherë do të jetë më e këndshme për syrin të lexojë tekst të tillë. Por edhe në këtë rast, ka një nuancë të tillë si hapësirat e mëdha midis fjalëve, që duket e shëmtuar. Kjo është ajo që ne do të korrigjojmë në këtë mësim.

Karakteristikat e CSS3:

Duke studiuar artikullin që kam zgjedhur për ju më sipër, do të mësoni gjithashtu shumë veti të dobishme, si dhe do të mësoni për veçoritë e reja të CSS3, i cili ju lejon të përdorni edhe më pak më pak imazhe Online.

Krijoni vizë fjalësh

Tekst pa viza

Nëse dikush nuk e kupton se për çfarë po flisni ne po flasim për, këtu është një shembull pa përdorur mbështjellësin e fjalëve:

Me viza

Dhe këtu është një shembull kur përdorim transferimin Fjalët CSS:

E bukur! Si ta bëni këtë në kod?

Tani, mendoj se të gjithë e kuptojnë shumë mirë se çfarë do të bëjmë. Pra, është koha për të mësuar për pronën e re që ka CSS3!

Dhe kjo pronë është shkruar kështu - viza.

E thjeshtë, apo jo? Por çdo shfletues ka prefikset e veta, kështu që në kod duket kështu:

Mos harroni të shtrini tekstin në të gjithë gjerësinë e bllokut duke përdorur vetitë e rreshtimit të tekstit: justifiko, ndryshe rezultatin e dëshiruar ju nuk do të shihni.

Jo vetëm njerëzit, por edhe fjalët mund të jenë të vështira për t'u duruar. Për shembull, një përbërje kimike është shumë e ngjashme me disa njerëz me " i përmbysur"! Ne nuk dimë se si të merremi me personalitete kaq të vështira, por CSS patjetër do të ndihmojë me mbështjelljen e fjalëve:

Pse të durosh "të padurueshmen"

Në shumicën e rasteve, kur shfaqni përmbajtje teksti në faqet e internetit në një shfletues, mbështjellja e fjalëve nuk zbatohet. Nëse fjala nuk përshtatet plotësisht në zonën e ekranit, atëherë si parazgjedhje është plotësisht " lëviz" në rreshtin tjetër.

Viza e pjesshme zbatohet vetëm për fjalët e gjata dhe komplekse që përmbajnë terma të shumtë dhe janë të ndara me vizë. Këtu lindin probleme në shfaqjen e këtyre fjalëve në ekranet e diagonaleve të ndryshme dhe në shfletues të ndryshëm. Në të njëjtën kohë, parashikoni me saktësi sa e gjatë do të jetë fjala " të duken si"Është e vështirë nga ana e klientit, kështu që përcaktimi i vizave" me dorë" nuk ka kuptim:

Zgjidhja e problemit të mbështjelljes së fjalëve duke përdorur HTML

Përpara se të shohim mbështjelljen e fjalëve të gjata në CSS, le të shqyrtojmë se si gjuha e hipertekstit mund ta zgjidhë këtë problem.
Ka disa opsione për këtë në HTML:

• Duke përdorur simbolin e pushimit të butë -- ju lejon të vendosni vendndodhjen e pushimit fjale e perbere. Kur ndryshoni madhësinë e dritares së shfletuesit në rreshti tjetër Vetëm pjesa e fjalës së gjatë pas ­ vihet me vizë, dhe pas gjysmës së parë shfaqet një vizë si vizë:

Një shembull i një përbërjeje kimike komplekse dhe tekst - metilpropenilen dihidroksi-cicinnamenilakrilik acid

• Duke përdorur një etiketë - elementi u shfaq në HTML 5. Ai gjithashtu shërben për t'i treguar shfletuesit se ku të thyejë një fjalë komplekse ose të gjatë. Por ndryshe nga karakteri special i mëparshëm, kjo etiketë nuk shfaqet në vendin " faji» viza, e cila mund të ndikojë negativisht në lexueshmërinë e të gjithë tekstit:

metilpropenileni dihidroksicina acid menilakrilik

Etiketoni mbështetjen në disa shfletues zbatuar gabimisht. Do të funksionojë në to nëse vetia e shfaqjes me vlerën inline-block specifikohet në kodin CSS.

Mbështjellja e fjalëve duke përdorur CSS

Përpara se të çaktivizojmë mbështjelljen e fjalëve në CSS, le të shohim disa veti që mund të zgjidhin problemin kryesor:

1. fjalë-mbështjellje – përshkruan se si të mbështjellen fjalët që nuk përshtaten në gjatësinë e dimensionet e vendosura enë. Vlen të paralajmërohet menjëherë se ka probleme me vërtetimin e kësaj prone, dhe konsorciumi W3C nuk ka vendosur ende për zbatimin e mbështetjes së tij në CSS. Prandaj, vërtetuesit e specializuar do të gjenerojnë një gabim nëse mbështjellja e fjalëve është e pranishme në kod:

Sidoqoftë, kjo pronë "perceptohet" nga të gjithë shfletues modern dhe eshte zgjidhje efektive probleme me vizatimin e fjalëve të gjata. word-wrap merr vlerat e mëposhtme:

• normale - fjalët nuk vihen me vizë;
• break-word – ambalazhimi automatik i fjalëve;
• trashëgon – trashëgon vlerën e prindit.

Një shembull që ilustron përdorimin e kësaj vetie:

Në specifikimin e ri CSS, vetia word-wrap është riemërtuar në overflow-wrap. Të dyja pronat pranojnë të njëjtat vlera. Por mbështetja e mbështjelljes së tejmbushjes është ende e zbatuar dobët, kështu që është më mirë të përdoret version i vjeter Vetitë:

Siç mund ta shihni në pamjen e mësipërme, prona e re mbështetet Google Chrome, por nuk mbështetet në IE. Prandaj, është më mirë të mos përdoret overflow-wrap për mbështjelljen e fjalëve në CSS.

1. thyerja e fjalëve – vendos rregullat për thyerjen e vijave brenda kontejnerit nëse ato nuk përshtaten në të në gjerësi. Kjo është një pronë e re dhe mbështetja për të është implementuar në CSS3. Është e vlefshme, por është krijuar për të punuar me vargje, kështu që mbështjellja e fjalëve mund të jetë gramatikisht e pasaktë.

Prona merr tre vlera:

• normale - përdoren rregullat e transferimit të paracaktuar;
• thyerja e fjalëve - ndërprerjet e rreshtave kryhen automatikisht në mënyrë që fjala të përshtatet në dimensionet e gjerësisë së kontejnerit;
• mbaj të gjitha – çaktivizon vizën automatike të fjalëve në kinezisht, japonisht dhe koreanisht. Për gjuhët e tjera, efekti i vlerës është i ngjashëm me normalen.

1. hyphens është një pronë e re që u prezantua me lëshimin e CSS3. Ai përcakton se si shfletuesi do të trajtojë mbështjelljen e fjalëve në tekstin dalës. Prona pranon disa vlera:

• asnjë - çaktivizon mbështjelljen e fjalëve në CSS;
• manual ( vlera e paracaktuar) – fjalët mbështillen në ato zona të bllokut të tekstit ku kjo është specifikuar duke përdorur etiketën ose transferim i butë (-) ;
• automatik - shfletuesi mbështjell automatikisht fjalët bazuar në cilësimet e tij.

Për funksionimin e duhur vetitë në etiketë ose

Atributi lang duhet të jetë i pranishëm me vlerën "ru" (lang="ru").

Prona e mbështetur versionet e fundit IE, Opera dhe Firefox. Secili prej tyre ka të vetin Linja CSS. Hyphens nuk mbështetet nga Google Chrome. Shembull:

Ndalimi i vizës së fjalës

Ndonjëherë duhet të siguroheni që e gjithë rreshti të shfaqet pa ndërprerje. Ndalimi i mbështjelljes së fjalëve në CSS mund të zbatohet në disa mënyra:

• Duke përdorur hapësirë ​​që nuk thyhet  , i cili instalohet në ndërprerjet e rreshtit ose ndërprerjet e fjalëve;
• Duke vendosur pronën hapesire e bardhe do të thotë " rrep» ( white-space: nowrap ).

Shembull i zbatimit:

Tani mund të transferoni nga duke përdorur CSS edhe fjalët më të gjata. Por do të duhet të përballeni vetë me problemin e njerëzve të vështirë për t'u toleruar. Provoni t'i ndikoni ato me metoda CSS

Për disa arsye, unë jam veçanërisht "me fat" me truket e çuditshme, të papritura me transferimin e tekstit.

Shkrova një libër elektronik dhe të kuptoja se si të mbështjella linjat e kodit në blloqe ishte një makth! Ndonjëherë, për shkak të përkthimit, një bllok teksti ishte jashtë vendit në lartësi nga kontejneri. Dhe vetëm lidhjet shumë të gjata ia vlenin!

A duhet të fus një vizë në vizë apo jo? Ne e mbajmë këtu, nuk e mbajmë atje. Ne fusim një vizë këtu, jo atje. Njëra pronë nuk dëshiron të punojë pa tjetrën. Dhe pse kjo lëvizje horizontale refuzon me kokëfortësi të zhduket?

/me godet tavolinen

Ka shumë situata që mund të ndeshen këtu që kërkojnë pak qasje të ndryshme për stilimin, kështu që në këtë artikull do të shikojmë vetitë tipike të përdorura për të zgjidhur probleme të tilla, si dhe disa skenarë nga jeta reale, në të cilin, për mendimin tim, janë veçanërisht të theksuara problemet me mbështjelljen/mbushjen e tekstit.

Vetitë

Në fund, kur zgjidhni problemet e mbështjelljes së tekstit, ju mbetet një "listë" tipike e të dyshuarve. Disa janë mjaft të dukshme dhe logjike, ndërsa të tjerët jo. Disa e bëjnë punën e tyre vetë, ndërsa të tjerët jo aq shumë.

Pra, le t'i hedhim një sy.

fjalë-mbështjell / vërshoj-mbështjell

Vetia word-wrap merr dy si vlera fjalë kyçe: normale (default) dhe fjalë e thyer . Kjo është përveç tre globale trashëgojnë vlerat, fillestar dhe i pacaktuar .

Si parazgjedhje, një fjalë që është shumë e gjatë nuk prishet. Shfletuesi nuk ndikon në një fjalë të tillë, e cila duket e mrekullueshme derisa të ndeshemi me ato celulare. Megjithëse madhësia e kontejnerit mund të rregullohet për t'iu përshtatur fjalës, ajo përfundimisht do të bjerë jashtë kufijve të saj dhe do të çojë në një gjendje të tmerrshme lëvizje horizontale në të gjithë faqen.

Në shembullin e parë të kësaj demonstrimi mund të shihni qartë sjelljen e paracaktuar:

Shembulli i dytë në këtë demonstrim përfshin tejmbushjen-mbështjellësin: break-word; deklaratë. , i cili i thotë shfletuesit të thyejë fjalën përpara se ndoshta të tejmbush kontejnerin e tij.

thyerje fjalësh

Me sa kuptoj unë, duhet veçoria e thyerjes së fjalës vetëm për të formatuar disi tekstin në gjuhën kineze, japoneze dhe koreane në një mënyrë të veçantë.

Unë kam përdorur thyerjen e fjalëve për të ndarë fjalët e gjata, por vetia e saktë (nëse nuk jeni duke punuar me tekstin e Lindjes së Largët) është tejmbushja e sipërpërmendur më e përgjithshme.

viza

Vetia hyphens i tregon shfletuesit se si të vihet me vizë dhe lejon vlerat e mëposhtme: asnjë , manual dhe automatik, të cilat aktualisht mbështeten dobët nga shfletuesit, kështu që ndoshta do t'ju duhet të ekzekutoni FireFox.

Vlera asnjë siguron që fjalët kurrë asnjë karakter vizë nuk do të zëvendësohet.

Nëse vlera është manuale, një vizë vihet në vizë vetëm nëse ka një simbol që e tregon këtë. Ju mund ta tregoni këtë duke futur ose simbolin vështirë, ose i butë transfero tek Vendi i duhur në shënim.

Një vizë e fortë (-) do të thotë që fjala të prishet në një pikë të caktuar nëse është e nevojshme, por gjithsesi gjithçka do të shfaqet në ekran.

Viza e butë (-) bën të njëjtën gjë, por në fakt nuk e shfaq vizën në ekran, gjë që përgjithësisht preferohet.

Në vlera auto fjalët mund të ndahen ose në mënyrë eksplicite vendet e specifikuara, ose automatikisht, në përputhje me rregullat e vizave specifike të gjuhës të specifikuara në skedarë të veçantë(nëse ato ofrohen në shfletuesin). Vizatimi është specifik i gjuhës dhe atributi lang duhet të përcaktohet për dokumentin.

hapesire e bardhe

Ne të gjithë kemi vetitë tona të preferuara CSS në të cilat mund të mbështetemi, si një dalje emergjente që thotë "Në rast aksidenti, thyejeni gotën me një çekiç" për t'ju nxjerrë nga një situatë ngjitëse; shih gjithashtu tejmbushje: fshehur dhe shfaqur: asnjë . Për mua, kjo pronë është hapësirë ​​e bardhë.

Kjo veti specifikon rregullat për përpunimin e karaktereve të hapësirës së bardhë (hapësira, skeda, ndërprerje rreshtash) në element. E cila ndonjëherë papritmas mund të rezultojë tepër e dobishme, për shembull, gjatë korrigjimit të gabimeve ose për të kontrolluar më mirë përmbajtjen e qelizave të tabelës.

Kjo pronë ka pesë vlera: normale (default), nowrap , pre , para-wrap dhe pre-line .

Ju mund t'i shihni këto veti në veprim në shembullin e mëposhtëm: Konsideroni të tjerat karaktere të hapësirës së bardhë në shënim.

Si parazgjedhje, karakteret e hapësirës së bardhë palosen në një hapësirë ​​të vetme dhe linjat ndahen për t'u përshtatur në kontejner; siç mund ta shihni në shembullin e parë demo, teksti ka hapësira shtesë, por ato nuk shfaqen.

nowrap (shembulli 2) gjithashtu injoron hapësirat shtesë, por nuk e thyen rreshtin e tekstit në kufijtë e kontejnerit.

pre merr parasysh të gjitha karakteret e hapësirës së bardhë në shënim dhe nuk i thyen linjat (siç shihet më sipër në shembullin 3).

para-mbështjellja (shembulli 4) merr parasysh hapësirën shtesë të bardhë, por shkakton thyerjen e vijës.

rreshti paraprak (shembulli i pestë i fundit) palos karakteret e hapësirës së bardhë (përveç furnizimit të rreshtit) Dhe detyron një "zinxhir" teksti të futet në një enë.

AktivCSS— Truket kashenjë e përshtatshme , e cila do të ndihmojë për të përmbledhur të gjitha.

Linjat e kodit në një bllok

Linjat e kodit në tag para nuk transferohen si parazgjedhje. Kjo mund të shkaktojë probleme në artikujt e blogut dhe në librat elektronikë teknikë në celular, për shembull.

Në përvojën time, zgjidhja zakonisht varet nga gjuha në të cilën është kodi dhe detyra në fjalë, por këto probleme mund të kapërcehen duke përdorur viza të detyruara (pa vizë!) ose lëvizje horizontale. Përmes provës dhe gabimit, mund të kuptoni se çfarë kombinimi të saktë të vetive i nevojiten një shfletuesi të caktuar. Sigurohu vlera e hapësirës së bardhë Nuk e anashkalova rastësisht në një nga ato që shemben hapësirat, sepse kjo mund të jetë e rëndësishme për sintaksën e kodit.

Kam hasur gjithashtu në probleme me përshtatshmërinë kur dizajnoj kodin për github (gist), i cili është veçanërisht i ndërlikuar për faktin se është një tabelë. Në raste të tilla, e kuptoj që do të më duhet të aplikoj një stil të veçantë për të anashkaluar enën e tavolinës.

Elipsi me kuptim

Për mua, deklarata CSS text-overflow: elipsis; - një lloj kapele. Është shumë kapriçioz dhe funksionon vetëm kur kombinohet me një grup pronash të tjera. Ai gjithashtu zbatohet vetëm për një rresht të vetëm teksti, duke e bërë atë jo veçanërisht të dobishëm.

Me shtojcën jQuery dotdotdot, mund të vendosni elipsa disa rreshta teksti dhe madje shtoni një lidhje në fund për të vazhduar leximin.

Këtu është një shembull i shpejtë:

Transferimi vetëm në një vend të përcaktuar rreptësisht

Ndonjëherë është e nevojshme që fjalët të thyhen vetëm në vende të përcaktuara rreptësisht ku ka kuptim, gjë që shton një nivel tjetër kompleksiteti; Si i komunikoni këto pika me shfletuesin?

Kjo mund të bëhet duke përdorur të butë ose transferta të vështira, të cilat, siç u diskutua më herët, vendosen në një vend specifik në shënim.

Jini të sigurt se nëse viza e butë mbështetet në shfletues, atëherë nëse është e nevojshme vija do të prishet në ato vende ku - është vendosur.

Hej, çfarë bëtë gjatë fundjavës? Kam pikturuar në qeramikë, më dukej e natyrshme.

Lidhjet janë shumë të gjata

Kam hasur vazhdimisht në problemin e lidhjeve shumë të gjata, përsëri, gjatë përgatitjes e-libër(po, kjo është fjalë për fjalë më e keqja kur boton një eBook) me shumë lidhje të tëra në fusnota.

Si parazgjedhje, lidhje të tilla nuk prishen dhe shkaktojnë të gjitha llojet e telasheve ekranet e vogla. Nëse është e nevojshme, URL-të duhet të prishen pa vizë, pasi lidhja nuk do të funksionojë në këtë rast. Edhe këtu duhet të keni kujdes, sepse nëse e lejon këtë, jo vetëm URL-të, por edhe të gjitha fjalët do të copëtohen.

Përfundim (Ha!)

Mund të jetë e vështirë të rreshtohesh pikërisht kombinimi i duhur këto prona për të përballuar me të papritur situatë e jashtëzakonshme, por njohuri më të thella opsionet e mundshme dhe aftësia për të njohur shpejt shembujt tipikë patjetër do t'ju ndihmojë të shmangni supozimet e panevojshme.

10 prill 2016

Pershendetje te gjitheve). Unë vazhdoj të shkruaj për përfitime të ndryshme gjuha 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ë bëni transferimi css fjalët nëse nuk futen në enën e tyre. 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 100 piksele të gjerë dhe më duhet të shkruaj një tekst në të. Ka një fjalë në tekst "vetë-nxjerrja". Kështu ndodh një arkiv, për shembull) Por kjo nuk është çështja. Fjala është shumë e gjatë, thjesht nuk do të përshtatet në gjerësinë e enës. Le ta shkruajmë në një bllok kaq të ngushtë (100 piksele). Çfarë do të ndodhë?

Siç e shihni, fjala e gjorë është zvarritur nga ena, mirë, nuk ka ku të shkojë, çfarë të bëni. Dhe kjo është pa dhëmbëzim. Pra, këtu vjen në shpëtim prona e mbështjelljes së fjalëve. Ja çfarë duhet të vendosni në bllok për të mundësuar mbështjelljen e fjalëve në të:

Fjala-mbështjellje: thyer-fjalë;

Dhe për të qenë më bindës, mund të shkruani mbushje(mbushje). Pra, pas aplikimit të pronës, shohim se fjalët që janë shumë të gjata do të transferohen shkronjë për shkronjë në një rresht tjetër. Për më tepër, edhe nëse rreshti i dytë nuk mjafton për fjalën, pjesa tjetër e tij do të transferohet në të tretën, etj.

Dua të theksoj se prona mund të përdoret pa frikë. Së pari, funksionon shkëlqyeshëm në shfletues sot. Së dyti, funksionon zgjuar. Përkatësisht, për të gjitha fjalët normale nuk do të ketë viza, të gjitha fjalët do të transferohen në rreshtin tjetër, kështu që lexueshmëria nuk do të ndikohet. Mund ta shihni në këtë pamje të ekranit.

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

Në fakt, deri tani shoh 2 raste përdorimi. E para është vetëm për blloqe të ngushta, ku keni frikë se fjalët e gjata mund të dalin në mënyrë të shëmtuar përtej kufijve të bllokut. E dyta është kur projektuesi synonte që titulli i faqes të ishte në disa rreshta.

Pra, në këtë artikull mësuam se si të bëjmë mbështjelljen e fjalëve në css. Kjo është e gjitha për mua sot. Shihemi.