Css prelamanje dugih linija. Kako zamotati riječi u CSS koje ne stanu u blok? Omogućite rastavljanje crtica za riječi koje ne odgovaraju

💖 Sviđa li vam se? Podijelite vezu sa svojim prijateljima
0

Pozdrav svima i počnimo. Recimo da imamo sljedeći tekst:

Vlada Ujedinjenih Arapskih Emirata i administracija u ovom gradu koncentriraju sve najnovije tehnologije temeljene na najnovijim dostignućima znanosti i tehnologije, pokušavajući ga pretvoriti u grad budućnosti, kao da je ravno s ekrana neke znanstvene fantastike film. Te tehnologije uključuju robote policajce, robote automobile i transportni sustav Hyperloop, au skoroj budućnosti će u Dubaiju početi s radom automatizirana leteća taksi služba. A kao pripreme za ovaj događaj svoj prvi let u automatskom načinu rada obavio je električni dvosjed Volocopter s 18 rotora, koji će se koristiti kao taksi, pišu...

Ovdje imamo tekst s kojim ćemo sada početi raditi.

I prvo svojstvo koje ćemo razmotriti zove se prijelom riječi

prijelom riječi: normalno | zadržati-sve | razbiti sve

Uglavnom nas zanimaju dvije vrijednosti ovog normalnog svojstva - zadana vrijednost i break-all, uz pomoć kojih utvrđujemo da se prelamanje riječi provodi znak po znak. Što se tiče čuvanja svega, ova se vrijednost koristi za prelamanje riječi na kineskom, japanskom i korejskom.

P( prijelom riječi: razbiti sve;. )

Imajte na umu da se nakon primjene ovog stila sav naš tekst rasteže na punu dostupnu širinu, a crtice se ne postavljaju riječima, već znakovima. Ovo svojstvo može biti korisno kada imamo jako dugu riječ koja ne stane u navedenu širinu. Međutim, to stvara neku vrstu neugodnosti, jer se apsolutno sve riječi prenose znak po znak, čak i one koje se uklapaju u zadanu širinu.

Srećom, postoji slično svojstvo koje prenosi samo riječi koje ne stanu u znakove. To se zove overflow-wrap:

P( overflow-wrap: break-word; )

i nakon primjene vrijednosti prijelomne riječi, sav naš tekst se prenosi riječ po riječ, a riječi koje ne stanu u navedenu širinu prenose se znak po znak. Možemo reći da je zadatak obavljen! Osim vrijednosti prijelomne riječi, ovo svojstvo prihvaća:

overflow-wrap: normalno | prijelomna riječ | naslijediti;

Sada prijeđimo na naprednije css svojstvo za prelamanje riječi u tekst.

Razmotrimo svojstvo razmaka s kojim možemo oponašati rad oznake pre bez mijenjanja samog teksta u monospace.

razmak: normalno | Nowrap | prije | predcrta | prethodno omotati | naslijediti

U osnovi, koristeći ovo svojstvo, radimo samo s razmacima u tekstu. Na primjer, ako na naš tekst primijenimo sljedeći stil:

Razmak: nowrap;

svi prijelomi redaka bit će zanemareni i naš će tekst biti prikazan kao jedan redak.

Razmak: pre;

Ako je vrijednost pre, svi prijelomi redaka bit će slični onima u izvornom kodu. Štoviše, ako tekst ne stane u navedenu širinu, tada se neće prenijeti. Ako želimo da se prenese, tada moramo navesti vrijednost predlinija.

Ako želimo uzeti u obzir ne samo prijelome redaka izvorni kod, ali i razmake između riječi, tada morate navesti:

Bijeli prostor: pre-omotavanje;

To je u biti sve što sam vam htio reći o rastavljanju riječi koristeći css. Nadam se da vam je ovaj članak bio koristan i da ćete više puta koristiti stečeno znanje.

Pa, opraštam se od tebe. Želim vam uspjeh i puno sreće! Pozdrav!

Odredite kako prelamati duge riječi:

  1. samo tamo gdje postoji crtica, razmak ili Enter (isključujući neprekinuti razmak i neprekinutu crticu ‑). Između dijelova jedne riječi (npr. crveno-žuto) piše se crtica, a između riječi crtica. "Meka crtica" - pojavljuje se samo kada je prijenos neophodan. Ako riječ ide dalje od roditelja, onda ili ​ prenosi svoj dio bez linije. Matematički izrazi koriste znak minus (na primjer, 5 − 2). Telefonski brojevi prikazuju traku znamenki (na primjer, +7 800 000‒00‒00). I sve to nije ista poznata stvar koja je na tipkovnici.
  2. nakon bilo kojeg znaka.
  3. prema pravilima ruskog jezika s automatskom upotrebom crtice.

preljev-omotati
prelamanje riječi
prijelom riječi
prijelom retka
crtice

naših tisuću devetsto devedeset devet kilograma već je ponovno pregledano dizač-buldožer-utovarivač

lang="ru"lang="ru">naša tisuću devetsto devedeset deveta je već ponovno pregledana - kilogram čupač-buldožer-utovarivač

Koja je razlika između jednog i drugog svojstva?

Prema zadanim postavkama, duge riječi nisu označene crticom osim ako nisu eksplicitno označene crticom i počinju u novom retku.

Kako bismo zanemarili crtice koje su odmah vidljive oku, dodajemo prijelom riječi: keep-all; .

Kako biste spriječili preglednik da obrati pozornost na meku crticu, umetnite crtice: none; .

Ako je potrebno prelamanje riječi, onda prelamanje riječi: break-word; Savjetujem vam da ga uvijek koristite jer ga razumiju svi preglednici. Razlikuje se od razbijanja riječi: break-all; , koji ima prednost u smislu da riječi koje ne stanu u blok počinju u novom retku i uzima se u obzir preporuka meke crtice.

Kada se koristi zajedno riječ prijelom: break-sve; s crticama: auto; , potonje se zanemaruje. crtice: auto; Postavlja sve crtice prema vlastitom nahođenju. Ali da bi funkcionirao, morate naznačiti svoj jezik navođenjem atributa lang="ru" u divu.

Ne prelamajte riječi u drugi redak

Recimo da stavka izbornika ili gumb neće izgledati dobro ako se raspadne. Stoga njihovo odvajanje mora biti zabranjeno. Da biste to učinili, sva gore navedena svojstva treba postaviti na "zadani" način rada i dodati. Kliknite i pogledajte naš poligon.

Prelamanje kontrolne riječi s crticama: auto;

Tetrahidropiranilciklopentiltetrahidropiridopiridin

Tetrahidropipiridino visoka

Bok svima). Nastavljam pisati o raznim korisnim svojstvima CSS jezika, koji na ovaj ili onaj način mogu pomoći u izgledu. I danas vam želim reći kako to učiniti css prijenos riječi ako ne stanu u svoj spremnik. Sve ću vam pokazati na pravom primjeru.

Omogućite rastavljanje crtica za riječi koje ne odgovaraju

Recimo da imam blok širine 100 piksela i u njega trebam napisati tekst. Tekst sadrži riječ " samoizvlačeći se". Tako nastaje arhiva, na primjer) Ali nije u tome stvar. Riječ je vrlo duga, jednostavno neće stati u širinu spremnika. Napišimo to u ovako uskom bloku (100 piksela). Što će se dogoditi?

Kao što vidite, sirotinja je ispuzala iz kontejnera, pa nema kud, što ćete. I ovo je bez uvlake. Dakle, ovo je mjesto gdje svojstvo word-wrap dolazi u pomoć. Evo što trebate postaviti za blok da biste omogućili prelamanje riječi u njemu:

Prijelaz riječi: break-word;

A da budete uvjerljiviji, možete i napisati podstava(podstava). Dakle, nakon primjene svojstva, vidimo da će riječi koje su preduge biti prebačene slovo po slovo u drugi redak. Štoviše, čak i ako drugi redak nije dovoljan za riječ, ostatak će se prenijeti u treći, itd.

Napominjem da se nekretnina može koristiti bez straha. Prvo, danas odlično radi u preglednicima. Drugo, radi pametno. Naime, za sve normalne riječi neće biti crtica, cijele riječi će biti prebačene u sljedeći redak, tako da čitljivost neće biti ugrožena. Možete ga vidjeti na ovoj snimci zaslona.

Kada koristiti prelamanje riječi

Zapravo, do sada vidim 2 slučaja upotrebe. Prvi je samo za uske blokove, gdje se bojite da bi dugačke riječi mogle neugledno stršati izvan granica bloka. Drugi je kada je dizajner namjeravao da naslov stranice bude u nekoliko redaka.

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

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. Izuzetak je element 

, tekst smješten u ovaj spremnik izlazi sa svim razmacima, onako kako ga je oblikovao korisnik.  Dakle, bijeli prostor simulira rad 
Ali za razliku od njega, ne mijenja font u monospace.
kratka informacija
Oznake

OpisPrimjer

<тип>
Označava vrstu vrijednosti.<размер>


A & & BVrijednosti se moraju ispisati navedenim redoslijedom.<размер> && <цвет>


A |  BOznačava da trebate odabrati samo jednu vrijednost od predloženih (A ili B).normalno |  malim slovima

A ||  BSvaka se vrijednost može koristiti samostalno ili zajedno s drugima bilo kojim redoslijedom.širina ||  računati


Vrijednosti grupa.[ obrezivanje ||  križ ]

*
Ponovite nula ili više puta.[,<время>]*


+
Ponovite jednom ili više puta.<число>+


?
Navedena vrsta, riječ ili grupa nisu obavezni.umetak?

(A, B)Ponovite najmanje A, ali ne više od B puta.<радиус>{1,4}


#
Ponovite jednom ili više puta odvojene zarezima.<время>#


×
 
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 
prelama tekst u novi red.  pre Tekst je prikazan uzimajući u obzir sve razmake i crtice, jer 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.  pre-line Razmaci se ne uzimaju u obzir u tekstu, tekst se automatski prenosi u sljedeći redak, ako se ne uklapa 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.
Učinak vrijednosti na tekst prikazan je u tablici.  1.
Primjer


 
 
 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
Objekt.style.whiteSpace
Bilješka
preglednik Internet Explorer do inačice 7.0 uključivo ne podržava vrijednosti prije retka i prije prelamanja.  Za