Prilikom izrade izgleda, webmasteri povremeno imaju pitanje: kako će se tekst prenijeti? U većini slučajeva preglednik sam rješava ovaj zadatak. Ali ponekad se ovaj proces mora uzeti pod kontrolu, posebno kod formalizacije duge riječi i fraze koje, ako se pogrešno prevedu, gube svoje značenje.
svojstvo prelamanja riječi
U HTML-u postoji posebna oznaka za odvajanje redaka
. Ali njegova se prečesta upotreba među programerima smatra lošim manirama i često ukazuje na neprofesionalizam. 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 izazvati kulturološki šok kod svakog programera. A što trebate učiniti ako na desktop verziji želite logo postaviti vodoravno, a ako je širina zaslona manja od 550 piksela okomito? Stoga uvijek koristite Cascading Style Sheets za prilagodbu izgleda elemenata. Pogotovo uz pomoć alata CSS prijenos strune izvedena je na elegantniji način. U ovom slučaju nema suvišnog označavanja, što samo smanjuje brzinu učitavanja stranice.
Prvo svojstvo kojem biste trebali pristupiti za obradu teksta je prelamanje riječi. Prihvaća tri vrijednosti: normalno, break-all i keep-all. Da biste radili, trebate samo zapamtiti break-all. Normalno je zadana postavka i nema smisla navoditi je. Keep-sve znači unutra CSS dokument zabrana prekida reda. Dizajniran posebno za kineske, japanske i korejske znakove. Stoga, ako ne namjeravate blogirati na jednom od ovih jezika, nekretnina vam neće biti od koristi. I također nije podržan Safari preglednik I Mobiteli temeljeno na iOS-u.
Za dodjelu logotipa iz prethodnog primjera s koristeći CSS Da biste premjestili svako slovo u novi red, morate napisati sljedeći kod:
P( font: bold 30px Helvetica, sans-serif; width: 25px; word-wrap: break-all; )
Širina i veličina fonta je odabrana na način da ima dovoljno prostora za samo jedno slovo. Prijelom riječi s vrijednošću break-all govori pregledniku da svaki put prelomi riječ u novi redak. Ovo se svojstvo ne može nazvati nezamjenjivim. Ali korisno je kada dizajnirate male blokove teksta, kao što su polja za unos komentara.
svojstvo bijelog prostora
Česta pogreška novih web programera je pokušaj uređivanja teksta razmacima ili tipkama Enter, a zatim se pitaju zašto se njihov trud ne vidi na stranici. Bez obzira koliko puta pritisnete Enter, preglednik će to zanemariti. Ali postoji način da prikažete tekst onako kako želite, uzimajući u obzir sve razmake.
U CSS dokumentu prijelomi redaka dodijeljeni korištenjem svojstva razmaka mogu se konfigurirati da poštuju razmake ili pritiske na tipku Enter. Praznina s vrijednošću prije retka natjerat će preglednik da vidi Enter u tekstu.
Ako u svom CSS kodu promijenite pre-redak u pre-wrap, prijelom retka će uzeti u obzir razmak. I obrnuto, zabranite bilo kakvo prelamanje tako da tekstu dodijelite svojstvo razmaka s vrijednošću nowrap:
#wrapper p( boja: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; white-space: nowrap; )
Tekst-preljev
Drugi koristan alat za rad s tekstom je text-overflow. Osim prijeloma redaka, svojstvo CSS omogućuje vam rezanje sadržaja kada je spremnik pun. Ima dvije vrijednosti:
- isječak - jednostavno obrezuje tekst;
- ellipsis - dodaje elipsu.
Da bi svojstvo radilo, element također mora biti postavljen da zabranjuje prijelome redaka i prelijevanje sa skrivenom vrijednošću.
kratka informacija
CSS verzije
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Opis
Svojstvo white-space određuje kako prikazati razmake između riječi. U normalnim uvjetima Bilo koji broj razmaka u HTML kodu pojavljuje se kao jedan na web stranici. Iznimka je oznaka
Tekst smješten u ovaj spremnik izlazi sa svim razmacima onako kako ga je oblikovao korisnik. Tako razmak imitira način na koji oznaka radiAli za razliku od njega, ne mijenja font u monospace.Sintaksa
razmak: normalno | Nowrap | prije | predcrta | prethodno omotati | naslijediti
Vrijednosti
normalno Tekst u prozoru preglednika prikazuje se kao i obično, prijelomi redaka postavljaju se automatski. nowrap Razmaci se ne uzimaju u obzir, prijelomi redaka u HTML kodu se zanemaruju, sav tekst se prikazuje u jednom retku; u isto vrijeme, dodajući oznaku
prelama tekst u novi red. pre Tekst je prikazan uzimajući u obzir sve razmake i crtice kako ih je programer dodao u HTML kodu. Ako je linija predugačka i ne stane u prozor preglednika, dodat će se vodoravna traka za pomicanje. Razmaci prije retka ne uzimaju se u obzir u tekstu; tekst se automatski premješta u sljedeći red ako ne stane u navedeno područje. pre-wrap Svi razmaci i prijelomi su sačuvani u tekstu, ali ako širina retka ne stane u navedeno područje, tekst će se automatski prelomiti u sljedeći redak. naslijediti Nasljeđuje vrijednost roditelja.Učinak vrijednosti na tekst prikazan je u tablici. 1.
HTML5 CSS2.1 IE Cr Op Sa Fx
bijeli prostor Primjer
Fermatov posljednji teorem
x n+Y n= Z n
gdje je n cijeli broj > 2
Rezultat ovog primjera prikazan je na sl. 1.
Riža. 1. Primjena svojstva razmaka
Objektni model
document.getElementById("elementID ").style.whiteSpace
Preglednici
preglednik Internet Explorer do inačice 7.0 uključivo ne podržava vrijednosti pre-line, pre-wrap i inherit. Za
Opera prije verzije 9.5 ne podržava vrijednost prije retka. Za
Safari prije verzije 3.0 i iOS ne podržavaju vrijednosti pre-wrap i pre-line.
Firefox do i uključujući verziju 2.0 ne podržava vrijednosti prije retka i prije prelamanja. Za
Line feed, line break, line break - sve je to isto. U HTML jezikčesto se koristi novi red. Postoji nekoliko načina: koristite oznaku
za prijelaz u novi redak ili možete koristiti CSS svojstva za prijelaz u redak. Pogledajmo primjer korištenja oznake za prijelom retka:U CSS-u prijelomi redaka mogu se napraviti na različite načine, na primjer ovako:
Br (
plovak: lijevo;
širina: 100%;
margina: 0 0 20px 0; /* uvlaka iza reda 20 piksela */
}Razdjelna crta pomoću HTML-a ili CSS-a
U HTML-u je stvaranje razdjelne linije vrlo jednostavno. Također se koristi neuparena oznaka
- ovo je linija razdvajanja. Razdjelna crta počinje u novom retku i uvučena je iza njega. Možete kontrolirati stil vodoravne linije, a možete joj i stvoriti alternativu. Ispod je primjer linije razdvajanja pomoću oznake:Hajdemo sada stilizirati (promijeniti stilove, promijeniti izgled) naša linija razdvajanja:
hr (
širina: 80%; /* širina linije */
visina: 4px; /* visina / debljina linije */
pozadina: #333; /* pozadina / boja linije */
granica: 0; /* okvir oko linije razdvajanja (uklonite je) */
margina: 5px 0 5px 0; /* ispuna iznad i ispod linije 5 piksela */
}I stvorimo alternativu našoj liniji razdvajanja pomoću oznake
i CSS.Lekcija 5.
U ovoj lekciji mi:
1. Saznajmo kako to učiniti html kod bio nam je praktičniji i lakši za čitanje.
2. Pogledajmo kako ispravno prelomi red teksta.Izrada html koda praktičnim.
Sada je naš kod jasan i lak za čitanje, jer ima malo teksta i praktički nema oznaka. Kada izradimo složeniju stranicu, bit će mnogo oznaka, pa će biti teško pronaći pravu.
Kako biste izbjegli nered oznaka, prvo morate rasporediti oznake i linije tako da ih je vizualno lakše uočiti. Kada preglednik čita informacije iz html stranice, nije mu bitno koliko razmaka i koliko praznih redaka ima u kodu.
Promijenio sam tekst u kodu stranice u odnosu na onaj koji smo stvorili, ali to nije važno. Lijeva i desna slika pokazuju isti kod. Obje opcije preglednik će prikazati na zaslonu monitora potpuno isto. Slažem se, rad s kodom prikazanim s desne strane bit će puno lakši nego s onim s lijeve strane.
Kod koji gledamo je vrlo jednostavan, ali već sada je primjetna razlika u vizualnoj percepciji. Ne postoje posebna pravila za "stavljanje stvari u red", svaki majstor za sebe odlučuje kako mu je prikladnije raditi.
HTML prijelom retka. Oznaka <br>.
Obratite pozornost na sliku. U prvoj verziji tekst je napisan u jednom redu, u drugoj verziji u dva retka.
Preglednik će obje opcije prikazati isto. Tekst će biti napisan u jednom redu:
Pitate se zašto je to tako? Doista, u jednom od kodova dio teksta je premješten u drugi redak. Bilo bi logično da se u pregledniku dio teksta također pomakne u drugi red, ali html ima svoju logiku po tom pitanju. Ako napravimo prijelom retka u html kodu, onda je to za preglednik jednako jednom razmaku(Kako regularni prostor između riječi u tekstu). Ako dio teksta pomaknemo ne jedan red prema dolje, već 2 ili 3 (bilo koji broj), tada će preglednik i dalje ovu udaljenost smatrati jednim pravilnim razmakom između riječi i kada se prikaže na ekranu, tekst će biti napisan u jednom retku .
Oznaka <br>
Kada smo se u trećoj lekciji upoznavali s tagovima, spomenula sam da postoje tagovi koji ne zahtijevaju zatvaranje. Označiti <br> jedan od njih se koristi za prijelom retka.
Primijenimo to u kodu:Umetnuli smo oznaku <br> u naš html kod i sada kada pokrenete datoteku kroz preglednik, dio teksta će biti prebačen u sljedeći redak.
* Ne zaboravite spremiti promjene u Notepad (Ctrl + S) i osvježiti stranicu u pregledniku (F5).Često postoji potreba za dodavanjem novog paragrafa, ali bez prazna linija, koji je umetnut oznakom paragrafa
Za neke fragmente teksta standardni razmak između odlomaka jednostavno je neprikladan. To mogu biti natpisi ispod slika iu tablicama, pjesme, citati, fusnote i bilješke.
Za prisiljavanje prijeloma redaka predviđena je posebna oznaka čija je funkcija sadržana u njezinom nazivu br (prekini redak - "prekini redak, redak"). Označiti
jezik hiperteksta html markup znači da sav sadržaj koji slijedi mora započeti u novom retku. Ako je potrebno, možete dodati nekoliko oznaka u nizu kako biste postigli potreban razmak.Označiti
Nije osjetljivo na velika i mala slova i ne zahtijeva oznaku za zatvaranje jer je prazan element, ali bolje je naviknuti se na zatvaranje svih oznaka. U XHTML-u, break tag mora biti "zatvoren" obrnutom kosom crtom.Primjer korištenja oznake prekida
Oznaka br na djelu< /title> <р>Izostanak s poslaр>
Nigdje drugdje i nikada
Nisam bio tako loš
Šefovi su pohlepna horda
Živog me grizuр>
Izostanak s posla
Nigdje drugdje i nikada
Nisam bio tako loš.
Šefovi su pohlepna horda
Živog me glođe.Atribut oznake
Jedini atribut koji ima html oznaka
, pod nazivom Govori pregledniku što treba učiniti s prijelomom retka ako se tekst mora omotati oko takozvanog plutajućeg elementa, što može biti, na primjer, slika s atributom poravnanja pomoću vrijednosti desno/lijevo ili blok u CSS-u koji ima dodijeljeno svojstvo float.U specifikacijama XHTML 1.0 / HTML 4.01, jasni atribut može se koristiti samo s Transitional, Frameset i, inače kôd neće raditi.
Svojstva atributa oznake
Učinak atributa clear ovisi o njegovoj vrijednosti i položaju plutajućeg elementa. Atribut može imati 4 vrijednosti:
Lijeva vrijednost sprječava prelamanje elementa poravnatog ulijevo, tako da će se tekst spotaknuti preko oznake
, nalazit će se ispod slike ili drugog plutajućeg elementa.Potpuno isti rezultat doći će korištenjem argumenta all, koji nikada neće dopustiti ni desno ni lijevo.
Prava vrijednost sprječava prelamanje teksta oko desno poravnatog elementa, dakle nakon oznake
tekst neće imati drugog izbora nego ići oko slike, teći oko nje udesno.Vrijednost none ("ni vaše ni naše") općenito uklanja sve ovlasti iz atributa clear i oznake
tiho pomiče liniju prema dolje.Clear atribut oznake nema zadanu vrijednost kao takvu.
Označiti
- ovo je meki prijenosOznaka prijeloma retka vrlo je korisna za stvaranje potrebnog razmaka između odlomaka, unutar kojih se koristi kao meki prijelom, ali ne kao sredstvo za dijeljenje teksta u odlomke.
Ne biste se trebali previše zanositi oznakom novog retka za oblikovanje teksta, jer rezultati njezine upotrebe nisu uvijek elegantni.
Na primjer, ako koristite oznaku
za razbijanje redaka unutar odlomka, to može rezultirati pojavom "češlja" u korisnikovom prozoru ako je manji od prozora koji je webmaster ciljao.
Pročitajte također