CSS	Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
2.1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+
3			2.0+	11.6+	3.1+	3.6+	2.1+	2.0+

kratke informacije

CSS verzije

Vrijednosti

centar Poravnava tekst sa središtem. Tekst se postavlja horizontalno u prozor pretraživača ili kontejner u kojem se nalazi blok teksta. Čini se da su redovi teksta nanizani na nevidljivu os koja se proteže niz centar web stranice. Ova metoda poravnanja se aktivno koristi u naslovima i raznim potpisima, kao što su natpisi; daje zvaničan i čvrst izgled dizajnu teksta. U svim ostalim slučajevima, centralno poravnanje se rijetko koristi iz razloga što je nezgodno čitati veliku količinu takvog teksta. justify Justified, što znači poravnati lijevo i desno u isto vrijeme. Da bi izvršio ovu radnju, pretraživač u ovom slučaju dodaje razmake između riječi. lijevo Poravnava tekst ulijevo. U ovom slučaju, redovi teksta su poravnati ulijevo, a desna ivica je raspoređena kao ljestve. Ova metoda poravnanja je najpopularnija na web stranicama, jer omogućava korisniku da lako pronađe nova linija i udobno čitati veliki tekst. desno Poravnava tekst udesno. Ova metoda poravnanja djeluje kao antagonist prethodnom tipu. Naime, redovi teksta su poravnati prema desnoj ivici, dok lijeva ostaje “pocijepana”. Budući da lijeva ivica nije poravnata, gdje se čitaju novi redovi, ovaj tekst je teže čitati nego da je poravnat lijevo. Stoga se desno poravnanje obično koristi za kratke naslove ne više od tri reda. Ne razmatramo određene lokacije na kojima se tekst mora čitati s desna na lijevo, gdje bi možda sličan način poravnanja bio koristan. auto Ne mijenja položaj elementa. inherit Nasljeđuje vrijednost roditelja. start Isto kao lijevo ako tekst ide s lijeva na desno i desno kada tekst ide s desna na lijevo. kraj Isto kao i desno ako tekst ide slijeva na desno i lijevo kada tekst ide s desna na lijevo.

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 1.

Rice. 1. Poravnajte tekst u Safari pretraživaču

Internet Explorer do verzije 7.0 uključujući to tumači nešto drugačije ovaj primjer od ostalih pretraživača, poravnavajući ne samo tekst, već i blokove (slika 2).

Rice. 2. Poravnanje teksta u Internet Exploreru 7

Objektni model

document.getElementById("elementID ").style.textAlign

Pregledači

IE do i uključujući verziju 7.0 poravnava ne samo sadržaj elementa na nivou bloka, već i sam element.

HTML oznake koje određuju poravnavanje i uvlačenje teksta

Opravdani tekst korišten u tipografiji

Primjer ispod pokazuje kako se poravnati tekst u širinu stranice:

poravnati = "lijevo"	align="desno"
	Svakim danom raste broj radnika zaposlenih u uslužnom sektoru i širenju informacija. Ako su simboli prošlih vekova bili farma i fabrika, onda je simbol sadašnjeg 21. veka kancelarija opremljena kompjuterima koji imaju pristup protoku informacija.
align="justify"	align="centar"
Svakim danom raste broj radnika zaposlenih u uslužnom sektoru i širenju informacija. Ako su simboli prošlih vekova bili farma i fabrika, onda je simbol sadašnjeg 21. veka kancelarija opremljena kompjuterima koji imaju pristup protoku informacija.	Svakim danom raste broj radnika zaposlenih u uslužnom sektoru i širenju informacija. Ako su simboli prošlih vekova bili farma i fabrika, onda je simbol sadašnjeg 21. veka kancelarija opremljena kompjuterima koji imaju pristup protoku informacija.

Vrijednost justify osigurava uniformnost poravnajte tekst desno i lijevo, to je u širini. Ova metoda se široko koristi u štampi.

Poravnavanje teksta u HTML-u prema sredini i širini

Poravnajte tekst u HTML-u centrirano, tekst udesno:

rezultat:

Atributi i vrijednosti

• align="left" - definira lijevo poravnanje teksta(podrazumevano).
• align="centar" - poravna tekst prema sredini.
• align="desno" - poravna tekst udesno.

Poravnaj | HTML uvlačenje teksta

HTML tekst i njegovo uvlačenje na lijevoj strani stranice

Mi ćemo proizvoditi uvlačenje teksta lijevo na dva načina:

rezultat:

Pogledaj u novom prozoru.

Svojstvo text-align-last ( ne treba brkati sa HTML align) određuje kako će posljednji red bloka ili linija prije prisilnog prekida biti poravnati. Ovo je važno jer posljednji red pasusa obično ne sadrži dovoljno teksta da popuni sav prostor.

U ovom članku ćemo pokriti sve aspekte svojstva text-align-last, uključujući vrijednosti koje prihvaća i podršku preglednika.

Upotreba i prihvaćene vrijednosti

Korištenje svojstva text-align-last je jednostavno. Evo isječka koda za poravnavanje posljednjeg reda teksta udesno:

Intro-graf (text-align: justify; // Potrebno za IE i Edge text-align-last: right; )

Svojstvo može imati sedam vrijednosti. Vjerovatno ste upoznati sa standardnim vrijednostima HTML teksta align:left, right i center. Oni poravnavaju tekst u zadnjem redu desno, lijevo i središte spremnika.

Primjer ispod ilustruje razlike između ove tri vrijednosti:

Pogledajte primjer

Četvrta vrijednost, justify , opravdava posljednji red tako da je tekst ravnomjerno raspoređen po cijeloj širini spremnika. Ovo se postiže dodavanjem odgovarajućeg broja razmaka između riječi. Ovisno o količini teksta, ovo svojstvo se može koristiti za potpuno popunjavanje prostora u posljednjem redu, a da se ne završi prevelike praznine između riječi.

Tekst u drugom pasusu je takođe raširen po širini, ali pošto poslednji red sadrži samo jednu reč, on je pozicioniran levo.

Pogledajte primjer

Poravnavanje zadnjeg reda teksta na lijevo je pogodno za jezike koji se čitaju s lijeva na desno ( LTR), ali to će biti netačno za RTL jezike. U takvim slučajevima, korištenje lijeve ili desne vrijednosti može uzrokovati probleme.

Srećom, možete koristiti početnu vrijednost da poravnate tekst s rubom gdje počinje pisanje i čitanje. To znači da postavljanjem svojstva text-align-last na start, poravnat ćete tekst lijevo za LTR jezike i desno za RTL jezike.

Također možete koristiti krajnju vrijednost da poravnate tekst na suprotnoj ivici od mjesta gdje počinjete pisati i čitati. Ovo će odgovarati vrijednosti desno za LTR jezike i lijevo za RTL jezike.

Pogledajte primjer

Zadana vrijednost za ovo svojstvo je auto. Kada se koristi, tekst u posljednjem redu se poravnava prema vrijednosti svojstva HTML text align, osim ako nije postavljeno da opravdava . Inače, tekst se distribuira po širini kontejnera samo ako je svojstvo text-justify postavljeno na distribuciju. U suprotnom, tekst se poravnava sa ivicom gde počinje pisanje i čitanje.

Važne napomene

Da bi text-align-last funkcionirao, svojstvo text-align mora biti postavljeno da justify . Ali ovo pravilo je implementirano samo u IE i Edge. U Firefoxu i Chromeu, svojstvo radi bez postavljanja text-align za opravdavanje . U primjeru ispod, tekst bi trebao biti desno poravnat u Edge i IE. U drugim pretraživačima, posljednji redovi pasusa će biti poravnati prema vrijednosti svojstva text-align-last, a preostali redovi će biti poravnati desno.

Pogledaj demo

Ako ne postavimo text-align na poravnanje justify HTML-a, rezultat neće izgledati tako lijepo. Stoga ćete najvjerovatnije postaviti distribuciju teksta na širinu.

Svojstvo radi čak i ako paragraf ima prisilni prijelom reda naveden pomoću oznake
ili nesto slicno tome. Imajte na umu da će ovo svojstvo utjecati na sve posljednje redove teksta unutar navedenog elementa, a ne samo na krajnji. Na primjer, ako tekst unutar članka ili elementa div sadrži tri pasusa, posljednji red u svakom će biti poravnat prema svojstvu text-align-last postavljenom za cijeli roditeljski element.

Ako trebate poravnati samo posljednji red sadržaja, možete koristiti selektore :last-child ili :last-of-type. Uzmite kod iz demonstracije ispod kao primjer:

članak ( text-align: justify; ) članak p: last-of-type ( text-align-last: right; )

Poravnava zadnji red zadnjeg paragrafa našeg članka udesno. Preostali redovi su poravnati na osnovu vrijednosti svojstva HTML text align.

Pogledaj demo

Također možete koristiti druge selektore: :par i :odd da promijenite poravnanje.

Ponekad se paragraf može sastojati samo od jednog reda. U ovom slučaju, ako ste naveli vrijednosti i za svojstvo text-align i za svojstvo text-align-last, onda će potonje svojstvo imati prednost.

Razmotrite sljedeći isječak koda:

p (poravnanje teksta: opravdati; ) p:nth-of-type(2) (poravnanje teksta-zadnje: lijevo; )

Ako drugi pasus ima samo jedan red, onda će tekst biti lijevo poravnat jer će text-align-last imati prednost. Demo u nastavku pokazuje ovaj kod CSS u akciji, plus nekoliko drugih HTML primjeri poravnati.

Pogledaj demo

Podrška za pretraživač

Podrška za ovo svojstvo može se omogućiti pomoću opcije " Omogućite eksperimentalne funkcije web platforme" V google chrome i Opera, počevši od verzija 35 i 22. Potpuno je podržan u Chrome 47+ i Operi 34+.

Da biste koristili ovo svojstvo u Firefoxu, morat ćete mu staviti prefiks -moz-. IE ne podržava početne i krajnje vrijednosti. U isto vrijeme, Edge u potpunosti podržava ovo svojstvo. Jedini popularni pretraživač koji ne podržava u potpunosti text-align-last je Safari.

Tipično, kreator stranice sam odlučuje koja će slova biti velika, a koja mala, na osnovu pravopisnih pravila i vlastitih preferencija. Međutim, proces promjene velikih i malih slova može se automatizirati korištenjem svojstva text-transform. Ovo svojstvo može imati četiri vrijednosti:

• nema - tekst je napisan bez izmjena;
• kapitalizirati- svaka riječ počinje velikim slovom;
• mala slova - svi znakovi postaju mala slova (mala slova);
• velika slova- svi znakovi postaju velika (velika slova).

Na primjer, sljedeće pravilo navodi da naslov H1 treba biti velikim slovima:

H1 (transformacija teksta: velika slova;)

Pogodno je podesiti automatsku promjenu velikih i malih slova za skraćenice, nazive elemenata, naslove i drugo tekstualni elementi, gdje trebate pisati velikim ili malim slovima.

Dekoracija teksta: svojstvo dekoracije teksta

Nekretnina tekst-dekoracija omogućava vam da tekstu dodate dodatni dizajn. Vrijednosti ovog svojstva su konstante ništa, podcrtaj, precrtaj, kroz liniju I blink, koji vam omogućavaju da prikažete običan tekst, nacrtate liniju iznad, ispod ili kroz tekst ili učinite da tekst treperi. Primjer korištenja različitih vrijednosti ove osobine prikazan je na slici 11.4.

Rice. 11.4.

Najčešća upotreba nekretnine tekst-dekoracija je promijeniti zadano podvlačenje veze. Na primjer, sljedeće pravilo navodi da veze trebaju biti podvučene:

A:link (dekoracija teksta: podvlačenje;)

Razmak između riječi: svojstvo razmaka riječi

Da biste postavili razmak između riječi u tekstu, koristite svojstvo razmaka riječi. Vrijednosti ovog svojstva mogu se postaviti pomoću ključna riječ normal , što je podrazumevano i postavlja standardni razmak za trenutni font. Da biste postavili razmak pored standardnog, možete odrediti vrijednost u bilo kojoj dostupnoj CSS jedinici, a vrijednost može biti negativna.

Dakle, sljedeće pravilo povećava razmak između riječi u naslovu H1 za 1em:

H1 (razmak između riječi: 1em;)

Poravnanje teksta: svojstvo poravnanja teksta

Poravnanje je postavljanje lijeve ili desne ivice bloka teksta duž nevidljivog vertikalna linija. Da biste poravnali tekst, koristite svojstvo text-align. Važeće vrijednosti za ovo svojstvo su lijevo, desno, centar i justify, koje specificiraju lijevo, desno, centar i poravnanje poravnanja, respektivno.

Sljedeće pravilo postavlja centralno poravnanje svih elemenata sadržanih u DIV elementu:

DIV (poravnanje teksta: centar;)

Vodeće: svojstvo visine linije

Vodeća je udaljenost između osnovnih linija linija koje su blizu jedna drugoj. U normalnim okolnostima, razmak između redova zavisi od vrste i veličine fonta i automatski ga određuje pretraživač. Ali ova vrijednost se može promijeniti korištenjem svojstva line-height. Zadana vrijednost normal uzrokuje da pretraživač automatski izračuna razmak između redova. Svaki broj veći od nule tretira se kao množitelj veličine fonta trenutnog teksta. Također je moguće koristiti sve jedinice dužine prihvaćene u CSS-u kao vrijednosti za ovo svojstvo. Također je dozvoljeno korištenje procentualnog zapisa, au ovom slučaju visina fonta se uzima kao 100%. Negativni prored nije dozvoljen.

Razmak između slova: svojstvo razmaka slova

Pretraživač automatski prilagođava razmak između znakova na osnovu veličine i tipa fonta. U nekim slučajevima potrebno je podesiti razmak između slova. Za kontrolu razmaka između slova koristite svojstvo razmaka slova. Vrijednosti za ovo svojstvo mogu biti bilo koje CSS jedinice dužine, ali se preporučuje korištenje relativnih jedinica na osnovu veličine fonta (em i ex). Za razliku od razmaka između redova, svojstvo razmaka između slova dozvoljava korištenje negativne vrijednosti, ali u ovom slučaju morate biti sigurni da je čitljivost teksta održana.

Sljedeće pravilo povećava razmak znakova u zaglavlju H1 za 0,5 em.

Pozdrav, dragi čitaoci blog stranice. Danas nastavljamo sa proučavanjem, a sljedeće imamo svojstva text-decoration, vertical-align, text-align, text-indent i niz drugih, koja pomažu u dizajniranju izgleda tekstova u Html kodu.

U prošlom članku pogledali smo svojstva koja su namijenjena za konfiguraciju izgled fontovi na .

Pa, još ranije smo detaljno pregledali sve tipove, naučili kako se mogu grupirati i koje prioritete pretraživač postavlja kada ih tumači. Istina, sve je ovo bilo podijeljeno u nekoliko članaka, pa da ne budete zbunjeni, savjetujem vam da proučite materijale redoslijedom kako je navedeno.

Dekoracija teksta, poravnavanje teksta, uvlačenje teksta u CSS-u

Kako raditi s tekstom u Css-u? Logično bi bilo pretpostaviti da za tu svrhu postoje posebno osmišljena pravila. Počnimo s text-align, koji je zapravo zamjena za atribut align (koristio se za poravnavanje sadržaja poput P pasusa ili naslova).

Ima samo četiri moguća značenja:

Značenje ostaje isto kao i prije. Poravnaj tekst- ovo je horizontalno poravnanje linija. Ovo pravilo se odnosi isključivo na blok elemente (paragrafe, naslove, itd.), tj. one oznake u kojima se može pojaviti nekoliko redova. Jer Pošto inline elementi mogu imati samo jednu liniju, nema posebne svrhe u korištenju poravnanja teksta u njima.

Jasno je da vrijednosti ovog pravila znače poravnanje, redom: lijevo, desno, središte i širinu stranice (Justify - istovremeno lijevo i desno povećanjem udaljenosti između riječi) . Podrazumijeva se da vrijednost Justify treba koristiti za elemente sa najmanje nekoliko redova teksta, inače neće biti vidljivog efekta.

Na primjer, opravdao sam prethodni pasus (možete vidjeti da ima glatke granice i lijevo i desno) koristeći:

Text-align:justify;

Po defaultu, horizontalno poravnanje teksta je lijevo, tj. Nema potrebe posebno pisati text-align:left, osim ako, naravno, prethodno niste naveli drugačije poravnanje. Inače, ovaj pasus sam poravnao sa centrom (centrom), opet radi jasnog primjera, ali ovdje je, mislim, sve jasno.

Sljedeće Css pravilo uvlaka teksta omogućava vam da navedete crvenu liniju, na primjer, za tekst u oznaci pasusa P. Uvlačenje crvene linije može se specificirati specificiranjem vrijednosti (bilo sa znakom plus ili znakom minus, koristeći ) ili korištenjem postotaka:

Iz čega se izračunavaju procenti u uvlačenju teksta? Od širine područja dodijeljenog za tekst. One. CSS pravilo text-indent:50% će postaviti crvenu liniju jednaku polovini dužine ove linije. Pa, ovaj paragraf služi kao primjer takvog pravila.

Ili možete, na primjer, postaviti negativnu vrijednost za crvenu liniju u uvlačenju teksta i tada ćemo dobiti otprilike ono što vidite u ovom pasusu. Za postignuće ovaj rezultat Napisao sam ovo CSS pravilo za oznaku P paragrafa:

Uvlaka teksta:-1em;

Pa, tipična upotreba uvlake teksta (za postavljanje standardne crvene linije) može izgledati ovako: text-indent:40px; (usput rečeno, primijenjeno na ovaj stav). Ovo pravilo, baš kao i poravnanje teksta o kojem smo ranije govorili, odnosi se samo na blok elemente, tj. gdje se može pojaviti nekoliko redova (paragrafi, naslovi, itd.).

Ok, idemo sada na tekst-dekoracija(dizajn pomoću horizontalne linije), koji je već primijenjen na sve HTML elemente (inline i blok).

Može imati samo četiri značenja:

One. može se koristiti pomoću dekoracije teksta: precrtavanje, podcrtavanje ili podvlačenje, ili ne koristiti ništa (nijedno). Neki HTML elementi već imaju zadani dizajn horizontalna linija, na primjer, (podvučeni su po defaultu).

Stoga, naglašavanje nečega drugog podvlačenjem (osim hiperlinkova) nije dobro, jer korisnici imaju zapisano u svojoj podsvijesti da kada je podvučeno (i također istaknuto bojom), to znači da mogu kliknuti na to da odu. Ali isticanjem običnog teksta podvlačenjem dovodite korisnika u zabludu i nakon toga postajete razočarani svojim resursom (on je mislio da jeste, ali se ispostavilo da...).

Nijansa u korištenju Css pravila za ukrašavanje teksta je da možete unijeti tri (ili dvije) vrijednosti odjednom za bilo koji Html element (ne izostavljajući nijedan) i kao rezultat ćete dobiti podvučeno-podvučeno-precrtano fragment teksta(zvuči i izgleda super, zar ne?):

Text-decoration: underline overline line-through;

Vrijednosti za dekoraciju teksta (ako želite koristiti nekoliko njih odjednom) potrebno je napisati kroz razmak.

Vertical-align - vertikalno poravnanje

Zatim imamo vertikalno poravnanje - vertical-align. Za gotovo sve elemente u HTML kodu, to znači poravnavanje inline elemenata s tekstom u odnosu na njihovu osnovnu liniju. Istina, za to to znači malo drugačije - sav sadržaj koji se nalazi u ovim ćelijama bit će poravnat okomito.

Za CSS pravilo vertikalnog poravnanja možete koristiti sljedeće vrijednosti:

Linije su prema zadanim postavkama poravnate prema osnovnoj liniji. Vidi, prijavio sam se povećajte veličinu fonta za ovaj dio teksta i ova dva fragmenta su poravnata sa baznom (donjom) linijom. A vertikalno poravnanje pomoću vertical-align je upravo namijenjeno za promjenu načina na koji su linije poravnate.

Na primjer, ako napišem vertical-align:baseline za isti uvećani dio teksta, onda neće doći do promjena, jer osnovna vrijednost se koristi za ovo CSS pravilo po defaultu.

Usput, možete koristiti i brojeve kao vrijednosti za njega, a natpis vertical-align:0 će značiti isto što i vertical-align:baseline, tj. osnovna linija je ekvivalentna nuli. Stoga, ako želimo naznačiti bilo kakav pomak u vertikalnom poravnanju, onda će ovaj pomak biti specificiran u odnosu na osnovnu liniju (ili nulu).

Možete to napisati ovako:

vertical-align:10px;

I primićemo pomaknite fragment s većim fontom prema gore 10 piksela u odnosu na osnovnu liniju. Ako zapišemo negativnu vrijednost:

Vertical-align:-10px;

Onda dobijamo pomaknuti fragment prema dolje u odnosu na osnovnu liniju. Iz primjera je jasno da se zbog pomaka visina reda povećala tako da se tekst uklapa u njega bez sudara sa susjednom linijom. Pomak se također može specificirati u Em i Ex, i to kao postotak, koji će se izračunati iz visine linije ovog elementa (sjetite se u prošlom članku smo naučili kako ga postaviti pomoću ).

Za vertikalno poravnavanje sadržaja ćelija tabele, vertical-align bi trebalo da koristi vrednosti na vrhu i na dnu da bi se sadržaj poravnao na vrhu i dnu ćelije (pa, sredina u ćeliji tabele se koristi kao zadana vrednost vertikalnog poravnanja ).

A za elemente fonta možete koristiti tekst-vrh, tekst-dolje, sredinu. Upotrijebimo ga kao primjer ovaj dio teksta značenje:

vertical-align:middle;

Šta je bio rezultat? Srednja linija uvećanog fragmenta je poravnata sa osnovnom linijom redovnog teksta, tj. dobili smo vertikalno poravnanje sa središnjom linijom. Za tekst na vrhu i na dnu teksta sve će biti isto. Ovo je tekst na vrhu, a ovo na dnu teksta.

Vrijednosti svojstva Css vertical-align sub i super odgovaraju pod- i super-indeksu koji se dogodio u čisti HTML(prije upotrebe CSS svojstva za vizuelni dizajn).

Transformacija teksta, razmak između slova, razmak između riječi i razmak

None se podrazumevano koristi i znači da se znakovi u tekstu neće menjati ni na koji način - kako je napisano u Html-u, ovako će biti prikazani. Vrijednost velikih slova za transformaciju teksta će transformisati sva slova u fragmentu u velika slova ( primjer je prikazan u ovoj rečenici, gdje je korišteno pravilo text-transform:uppercase, a slova su izvorno napisana malim slovima).

Vrijednost malih slova za Css pravilo transformacije teksta omogućit će vam da transformišete sve znakove u fragmentu u mala slova, a vrijednost velikog slova će učiniti da sva prva slova riječi budu velika ( primjer u ovoj rečenici- text-transform:capitalize). One. koristeći text-transform možete učiniti sve što želite s običnim tekstom, a zatim lako vratiti sve nazad.

Stoga, ako, na primjer, imate zadatak da sve naslove napišete samo velikim slovima, zatim ih napišite u Html-u kao i obično i napravite ih velikim slovima u CSS-u putem text-transform:uppercase. Zatim, ako odlučite da nešto promijenite, potrebno je samo malo promijeniti stilove, a ne sadržaj svih 100.500 zaglavlja na vašoj web stranici.

Prema zadanim postavkama, i razmak između slova i riječi su postavljeni na Normal, ili je to isto kao nula (tj. razmak između znakova i riječi se ni na koji način ne mijenja). Količina promjene udaljenosti u ovim pravilima može se specificirati samo u pikselima, Em ili Ex, ali ne i u procentima.

Međutim, možete koristiti i pozitivne (rijetkost znakova ili riječi) i negativne vrijednosti (zbližavanje znakova ili riječi). Na primjer, možete "ovo je kako razrijediti znakove u ovoj frazi" koristeći sljedeće Css pravilo:

Razmak između slova:0.4em;

Ili možeš “evo kako približiti simbole u ovoj frazi” korištenjem:

Razmak između slova:-1px;

Isto se može reći i za razmak između riječi, s jedinom razlikom što će se udaljenost između riječi promijeniti, kao, na primjer, u ovoj frazi, koristeći ovu CSS konstrukciju:

Razmak između riječi:4em;

Slično, možete koristiti negativne vrijednosti u razmaku između riječi kako biste smanjili razmak između riječi.

Pa, posljednje CSS pravilo za danas, koje vam omogućava da na određeni način formatirate tekst u HTML kodu, je ovo razmak. Odgovoran je za prikaz znakova razmaka na web stranici do kojih je došlo prilikom pisanja HTML koda.

Kao što se sjećate iz članka o tome, preglednik prilikom raščlanjivanja koda kombinuje sve razmake, prijelome redova i tabulatore u jedan razmak i lomi redove na web stranici tačno prema razmaka znakova, koji se dogodio u kodu.

Dakle, bijeli prostor može imati jednu od tri vrijednosti:

Jasno je da je zadana vrijednost Normalna iu ovom slučaju se sve prikazuje kako sam maloprije opisao. Ali kada se koristi vrijednost Pre, dobijamo potpunu analogiju sa upotrebom, tj. Na web stranici tekst će biti prikazan sa svim onim dodatnim razmacima koji su bili prisutni prilikom pisanja koda, a pretraživač više neće moći vršiti prijenose pomoću njih.

Pa, šta znači? nowrap Jednostavno će spriječiti pretraživač da omota sve znakove razmaka koje pronađe unutar fragmenta pomoću CSS pravila white-space:nowrap. Možete sami isprobati kako sve funkcionira tako što ćete kreirati jednostavnu Html datoteku i priložiti bilo koji dio teksta u oznake poput ove:

Sretno ti! Vidimo se uskoro na stranicama blog stranice

Možda ste zainteresovani

Stil liste (tip, slika, pozicija) - Css pravila za prilagođavanje izgleda lista u HTML kodu
Pozicioniranje pomoću Z-indeksa i pravila CSS kursora za promjenu kursora miša
Padding, Margin and Border - postavljeni CSS interni i vanjske margine, kao i okviri za sve strane (gore, dolje, lijevo, desno)
Čemu služi CSS, kako povezati kaskadne tablice stilova HTML dokument i osnovnu sintaksu ovog jezika
Float i clear u CSS - alatima za raspored blokova
CSS - šta je to, kako se povezuju kaskadni stilovi HTML kod koristeći stil i vezu
Jedinice dimenzija (pikseli, Em i Ex) i pravila nasljeđivanja u CSS-u
Tag, klasa, Id i univerzalni selektori, kao i selektori atributa u modernom CSS-u
Pozicija (apsolutna, relativna i fiksna) - metode pozicioniranja HTML elementi u CSS-u (lijeva, desna, gornja i donja pravila)
Pozadina u CSS-u (boja, pozicija, slika, ponavljanje, prilog) - sve za postavljanje pozadine ili boje pozadine Html slike elementi