10. aprila 2016

Zdravo svima). Nastavljam da pišem o raznim korisnim svojstvima css jezika koji mogu nekako pomoći u rasporedu. I danas želim da vam kažem kako da umotate reči u css ako ne stanu u vaš kontejner. Sve ću vam pokazati na pravom primjeru.

Uključite crticu za riječi koje se ne uklapaju

Recimo da imam blok širine 100 piksela i treba da upišem nešto teksta u njega. Riječ se sreće u tekstu Samoraspakirajuće... Ovo je arhiva, na primjer) Ali nije poenta. Riječ je jako duga, jednostavno neće stati u širinu kontejnera. Napišimo to u tako uskom bloku (100 piksela). Šta će se desiti?

Kao što vidite, jadnik je ispuzao iz kontejnera, pa nema kud, šta da radite. I ovo je bez uvlačenja. Dakle, ovdje svojstvo premotavanja riječi dolazi u pomoć. Evo šta trebate zatražiti od bloka da omogući prelamanje riječi u njemu:

Prelamanje riječi: break-word;

A za uvjerljivost, možete dodati i padding. Dakle, nakon primjene svojstva, vidimo da će riječi koje su preduge premotati riječ po slovo u drugi red. Štaviše, čak i ako drugi red nije dovoljan za riječ, ostatak će se prenijeti u treći, itd.

Napominjem da se nekretnina može bezbedno koristiti. Prvo, danas odlično radi u pretraživačima. Drugo, radi pametno. Naime, za sve normalne riječi neće biti hifena, cijele riječi će biti prebačene u sljedeći red, tako da čitljivost neće biti narušena. Možete to vidjeti na ovom snimku ekrana.

Kada koristiti prelamanje riječi

Zapravo, do sada vidim 2 slučaja upotrebe. Prvi je samo za uske blokove, gdje se bojite da bi duge riječi mogle ružno ispuzati iz bloka. Drugi je kada je dizajner zamislio da naziv stranice bude u nekoliko redova.

Dakle, u ovom članku smo naučili kako napraviti premotavanje riječi u css-u. To je sve za mene danas. Vidimo se.

Lekcija 5.

U ovom tutorijalu, mi:
1. Naučimo kako da html kod učinimo praktičnijim i lakšim za čitanje.
2. Hajde da analiziramo kako pravilno izvršiti prelamanje teksta.

Mi činimo html kod praktičnim.

Sada je naš kod jasan i lak za čitanje, jer u njemu ima malo teksta i praktično nema oznaka. Kada kreiramo složeniju stranicu, biće mnogo oznaka, pa će biti teško pronaći onu koja vam je potrebna.

Kako ne bi bilo nereda s oznakama, prvo morate urediti oznake i linije tako da se lakše vizualno percipiraju. Kada pretraživač čita informacije sa html stranice, nije važno koliko razmaka ili koliko praznih linija ima u kodu.

Promijenio sam tekst u kodu stranice u odnosu na onaj koji smo kreirali, ali nema veze. Lijeva i desna slika prikazuju isti kod. Obje opcije će pretraživač prikazati na ekranu monitora na potpuno isti način. Slažem se, rad s kodom prikazanim na desnoj strani bit će mnogo lakši nego s onim lijevo.

Kod koji gledamo je vrlo jednostavan, ali čak i sada postoji primjetna razlika u vizualnoj percepciji. Ne postoje određena pravila za "dovođenje stvari u red", svaki majstor odlučuje za sebe kako mu je zgodnije raditi.

Prijelom HTML reda. Oznaka & ltbr & gt.

Obratite pažnju na sliku. U prvoj verziji tekst je napisan u jednom redu, u drugoj verziji u dva reda.

Pregledač će prikazati obje opcije na isti način. Tekst će biti napisan u jednom redu:

Zašto je to tako, pitate se? Zaista, u jednom od kodova dio teksta je prebačen u drugi red. Bilo bi logično kada bi se u pretraživaču dio teksta također prebacio u drugi red, ali html ima svoju logiku u tom pogledu. Ako napravimo prijelom reda u html kodu, onda je to za pretraživač ekvivalentno jednom razmaku(kao normalan razmak između riječi u tekstu). Ako dio teksta pomjerimo ne jedan red naniže, već 2 ili 3 (bilo koji broj), tada će pretraživač i dalje računati ovu udaljenost kao jedan običan razmak između riječi i kada se prikaže na ekranu, tekst će biti napisan u jednom redu .

& Ltbr & gt tag

Kada smo se u trećoj lekciji upoznali s tagovima, spomenuo sam da postoje oznake koje ne zahtijevaju zatvaranje. Tag & ltbr & gt jedan od njih, služi za prelom redova.
Primijenimo to u kodu:

Ubacili smo oznaku & ltbr & gt u naš html kod i sada kada se datoteka pokrene kroz pretraživač, dio teksta će biti prebačen u sljedeći red.
* Ne zaboravite spremiti promjene u Notepad (Ctrl + S) i osvježiti stranicu u pretraživaču (F5).

Tokom layout-a, izdavači povremeno imaju pitanje: kako će se izvršiti prijenos teksta? U većini slučajeva, pretraživač sam rješava ovaj zadatak. Ali ponekad se ovaj proces mora uzeti pod kontrolu, posebno dizajniranjem dugih riječi i fraza koje, ako se pogrešno stave crtica, gube svoje značenje.

Svojstvo prelamanja riječi

U HTML-u postoji posebna oznaka za odvajanje nizova
... Ali njegova prečesta upotreba se među programerima smatra lošom formom i često ukazuje na neprofesionalnost. Kao dokaz, zamislite da imate logo i želite da svako slovo počinje u novom redu:

Rezultat je glomazan i ružan kod koji će svakom programeru izazvati kulturni šok. A šta ako želite da logo bude horizontalan u desktop verziji, a okomit kada je ekran manji od 550 piksela? Stoga uvijek koristite kaskadne tablice stilova da biste prilagodili izgled elemenata. Štaviše, uz pomoć CSS alata, prijelomi linija se rade na elegantniji način. Istovremeno, nema suvišne oznake, što samo usporava brzinu učitavanja stranice.

Prvo svojstvo koje treba pogledati za obradu teksta je word-wrap. Prihvaća tri vrijednosti: normalan, break-all i keep-all. Potrebno je samo da zapamtite da biste radili. Normalno je podrazumevano i nema smisla da ga navodite. Keep-all znači da prijelomi redova nisu dozvoljeni u CSS dokumentu. Dizajniran posebno za kineske, japanske i korejske znakove. Stoga, ako nećete pisati blog na bilo kojem od ovih jezika, nekretnina vam neće biti od koristi. Takođe ga ne podržavaju Safari pretraživač i iOS mobilni telefoni.

Da biste logotipu iz prethodnog primjera pomoću CSS-a dodijelili prijelom reda za svako slovo, trebate napisati sljedeći kod:

P (font: bold 30px Helvetica, sans-serif; širina: 25px; word-wrap: break-all;)

Širina i veličina fonta biraju se na način da ima dovoljno prostora za samo jedno slovo. Prelamanje riječi sa vrijednošću za prekid svih govori pretraživaču da svaki put premota riječ u novi red. Ovo svojstvo se ne može nazvati nezamjenjivim. Ali dobro dođe kada dizajnirate male blokove s tekstom, na primjer, polja za unos komentara.

Vlasništvo bijelog prostora

Uobičajena greška za početnike web programere je da pokušaju urediti tekst s razmacima ili pritisnuti Enter, a zatim se zapitati zašto njihovi napori nisu vidljivi na stranici. Bez obzira koliko puta pritisnete Enter, pretraživač će to ignorisati. Ali postoji način da ga natjerate da prikazuje tekst onako kako želite, i uzimajući u obzir sve razmake.

U CSS dokumentu, prijelomi redova dodijeljeni korištenjem svojstva razmaka mogu se konfigurirati da uzmu u obzir razmake ili pritisnuti Enter. Razmak sa vrijednosti pre-line će natjerati pretraživač da vidi Enter u tekstu.

Ako promijenite pre-line u pre-wrap u svom CSS kodu, prijelomi redova će uzeti u obzir razmak. Suprotno tome, onemogućite bilo kakvu hifenaciju postavljanjem svojstva razmaka sa vrijednošću nowrap na tekst:

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

Text-overflow

Još jedan koristan alat za rad sa tekstom je prelivanje teksta. Pored prijeloma redaka, CSS svojstvo omogućava isjecanje sadržaja kada je kontejner pun. Zauzima dvije vrijednosti:

• isječak - samo seče tekst;
• elipsis - dodaje elipsu.

#wrapper p (boja: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; text-overflow: ellipsis; / * Dodaj elipsis * / white-space: nowrap; / * Onemogući prelamanje linija * / overflow: skriveno; / * Sakrij sve izvan kontejnera * /)

Da bi svojstvo funkcioniralo, elementu također mora biti dodijeljen prijelom reda i prelivanje sa skrivenom vrijednošću.

Često postoji potreba za dodavanjem novog paragrafa, ali bez praznog reda, koji se ubacuje pomoću oznake paragrafa

Za neke odlomke teksta, standardni razmak koji se koristi za pasuse jednostavno je neprikladan. To mogu biti natpisi ispod slika i u tabelama, pjesme, citati, fusnote i bilješke.

Za prisilno prelamanje reda predviđena je posebna oznaka, čija je funkcija u njenom nazivu br (break row - "prekinuti red, red"). Tag
html znači da sav sadržaj koji slijedi mora početi u novom redu. Ako je potrebno, možete staviti nekoliko oznaka u nizu kako biste postigli potreban razmak.

Tag
nije osjetljiv na velika i mala slova i ne zahtijeva završnu oznaku jer je prazan element, ali bolje je steći naviku zatvaranja svih tagova. U XHTML-u, oznaka za prekid mora biti "čvrsto zatvorena" sa obrnutom kosom crtom.

Primjer upotrebe break oznake