Css premotavanje dugih riječi. Kako dodati prijelome reda koristeći CSS svojstva

Dom / Zamrzava

Internet se sastoji od sadržaja, sadržaj se sastoji od riječi, a riječi mogu biti jako, jako dugačke. I prije ili kasnije webmaster se suoči s problemom prevođenja dugih riječi. Ovaj problem je posebno relevantan za responzivni dizajn i za male blokove sadržaja. Pa kako se nosite sa ovim problemom?

Crtica

Prvo rješenje za spajanje dugih riječi je korištenje crtice.

Defisi ( -webkit-crtice: auto; -moz-crtice: auto; -ms-crtice: auto; crtice: auto; )

Podrška za pretraživače: CSS crtice podržavaju skoro svi moderni pretraživači, sa izuzetkom Chromea, Opera, Androida. Takođe, vrlo često se crtica ubacuje na mesta koja su gramatički neispravna.

Pauza riječi

Wordbreak je CSS svojstvo koje pokazuje da li bi redovi trebali biti prekinuti unutar riječi.

Obriv-slova ( -ms-word-break: break-all; word-break: break-all; word-break: break-word; )

Podrška za pretraživač: Prelomi riječi su podržani u svim pretraživačima osim Opera Mini i starijih verzija Opere.

Overflow wrapper

Sljedeće rješenje je korištenje overflow-wrap-a.

Obertka-perepolneniya ( word-wrap: break-word; overflow-wrap: break-word; )

Podrška za pretraživače: Podržano u skoro svim pretraživačima. Napomena: Neki pretraživači zahtijevaju korištenje "word-wrap" umjesto "overflow-wrap".

Ellipsis

Druga opcija je korištenje elipse.

Multigotochiye (prelivanje: skriveno; razmak: sadarap; prelijevanje teksta: ellipsis; )

Podrška za pretraživače: Podržavaju svi moderni pretraživači.

Ova metoda djeluje, ali je daleko od idealne.

konačno rješenje: Korištenje Overflow i Hyphen Wrapper.

Finalnoye-resheniye ( overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-crtice: auto; -moz-crtice: auto; crtice: auto; )

Ovo rješenje će omogućiti pretraživaču koji ga podržava da ubaci crticu, a pretraživačima koji to ne podržavaju da umetnu prijelom reda.

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

Vlada Ujedinjenih Arapskih Emirata i administracija koncentrišu u ovom gradu sve najnovije tehnologije zasnovane na najnovijim dostignućima nauke i tehnologije, pokušavajući da ga pretvore u grad budućnosti, kao pravo sa ekrana neke naučne fantastike. film. Ove tehnologije uključuju robote policajce, robotske automobile i Hyperloop transportni sistem, a u bliskoj budućnosti će u Dubaiju početi sa radom automatizovana leteća taksi služba. A u pripremi za ovaj događaj, električni dvosed Volocopter sa 18 rotora, koji će služiti kao taksi, izveo je prvi let u automatskom režimu, pišu...

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

A prvo svojstvo koje ćemo razmotriti zove se word-break

prijelom riječi: normalan | zadrži sve | slomiti sve

Uglavnom nas zanimaju dvije vrijednosti ovog normalnog svojstva - default vrijednost i break-all, uz pomoć kojih utvrđujemo da se prelamanje riječi vrši karakter po znak. Što se tiče čuvanja svega, ova vrijednost se koristi za prelamanje riječi u kineski, japanski i korejski.

P (prelom riječi: prekid-sve;. )

Imajte na umu da nakon upotrebe ovog stila sav naš tekst je rastegnut 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 se ne uklapa u navedenu širinu. Međutim, to stvara svojevrsnu neugodnost, jer se apsolutno sve riječi prenose znak po znak, čak i one koje se uklapaju u datu širinu.

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

P( overflow-wrap: break-word; )

i nakon primjene vrijednosti break-word-a, sav naš tekst se prenosi riječ po riječ, a riječi koje se ne uklapaju u navedenu širinu prenose se znak po znak. Možemo reći da je zadatak završen! Pored vrijednosti prijelomne riječi, ovo svojstvo prihvata:

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

Sada pređimo na naprednije css svojstvo za prelamanje riječi u tekstu.

Razmotrimo svojstvo razmaka, pomoću koje možemo imitirati rad oznake pre bez promjene samog teksta u monospace.

razmak: normalan | nowrap | pre | pre-line | pre-wrap | naslijediti

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

Razmak: nowrap;

svi prijelomi redova će biti zanemareni i naš tekst će biti prikazan kao jedan red.

Razmak: pre;

Ako je vrijednost pre, svi prijelomi reda će biti slični onima u izvornom kodu. Štoviše, ako se tekst ne uklapa u navedenu širinu, neće se prenijeti. Ako želimo da se prenese, onda moramo navesti vrijednost pre-line.

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

Razmak: pre-wrap;

To je u osnovi sve što sam želio da vam kažem o precrtavanju riječi pomoću CSS-a. 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 uspeh i sreću! ćao!

Vlad Merzhevich

Za razliku od teksta u štampi, crtice se rijetko koriste na web stranici, jer nismo striktno vezani za format papira. Sajtovi se mogu gledati na različitim monitorima, sa različitim rezolucijama, u različitim operativni sistemi i pretraživači. Sve to dovodi do takve kombinacije kombinacija da je nemoguće predvidjeti kako će krajnji tekst izgledati za korisnika. Zbog toga se tekst obično poravnava lijevo, a crtice se pojavljuju u cijelim riječima. Ali ipak, u nekim je slučajevima potrebno prevođenje riječi, na primjer, kada se dugi hemijski ili medicinski izrazi koriste u uskim stupcima određene širine, radi estetike. U HTML i CSS priručniku ili automatske metode Nema toliko crtica za dodavanje, pa ću ih sve navesti.

Korištenje oznake

Tag uveden u HTML5 i kreira prelamanje riječi kada je to potrebno. Na onim mjestima na kojima je, prema pravilima ruskog jezika, dozvoljena crtica, ubacujemo (primjer 1). Ako se cijela riječ uklapa u dodijeljenu širinu, ova oznaka se neće manifestirati ni na koji način, a mi nećemo ni znati za njeno prisustvo. Ako se riječ ne uklapa, pretraživač je na lokaciji oznake kreira transfer.

Primjer 1. Tag

Transferi

Jedan dvanaesti razred sanjarica Anzhelika, nakon što je završila školu, odabrala je profesiju biznisa proizvedeno vozač prostrt.

Rezultat ovog primjera prikazan je na sl. 1.

Rice. 1. Tekst sa crticama

Soft transfer

Aplikacija ima ozbiljan nedostatak - nemoguće je razumjeti da li je to crtica ispred nas ili posebna riječ na drugom redu. Zbog toga se može izgubiti značenje rečenice i može biti pogrešno shvaćena. Crtice moraju biti urađene prema pravilima tipografije, odnosno: dodati crticu na kraju reda. Mekana crtica se dobro nosi s tim u HTML kodu postoji poseban znak - . Ima istu ulogu kao i oznaka - nije vidljivo u običnom tekstu i pomiče riječ u drugi red, uz dodavanje crtice (primjer 2).

Primjer 2: Meki prijenos

Transferi

Učenica jedanaestog razreda, Angelica, nakon završene škole, izabrala je zanimanje poslovnog vozača.

Rezultat ovog primjera prikazan je na sl. 2. Obratite pažnju koliko je estetski ugodnije i jasnije tekst u odnosu na sliku. 1.

Rice. 2. Tekst sa crticama

word-break property

Da automatizujete proces kreiranja crtica, koristite svojstvo word-break sa vrednošću break-all (primer 3). Više ne morate dodavati nikakve simbole ili oznake u HTML. Stilovi će se pobrinuti za sve.

Primjer 3. Korištenje prijeloma riječi

Transferi

Učenica jedanaestog razreda Angelica izabrala je zanimanje kancelarijskog radnika nakon završene škole.

Rezultat ovog primjera prikazan je na sl. 3. Pravila za precrtavanje teksta u ovom slučaju se ne uzimaju u obzir, pa se riječi mogu stavljati na vrlo bizaran način.

Rice. 3. Tekst sa crticama

Od svih navedenih metoda, korištenje "poluručnog" daje najbolji rezultat - poštuju se pravila ruskog jezika, tekst izgleda najugodnije. Koristite ga kada u tekstu ima dugih riječi.

Svojstvo crtica

I konačno, najmoćnija i najpovoljnija nekretnina za automatsko dodavanje crtice - crtice. Njegovo djelovanje je bazirano na rječniku hifenacije ugrađenom u pretraživač, tako da daje najbolji rezultat. Podržano u IE10, Firefoxu, Androidu i iOS-u. Chrome i Opera ne podržavaju. Da bi ovo funkcioniralo, za oznaku dodajte atribut lang sa vrijednošću ru (primjer 4).

Primjer 4: Korištenje crtica

Transferi

Učenica jedanaestog razreda Angelica izabrala je zanimanje kancelarijskog radnika nakon završene škole.

Rezultat ovog primjera prikazan je na sl. 4.

Rice. 4. Tekst sa crticama

Zabrana transfera

Često se javlja suprotan zadatak - zabraniti hifene na mjestima gdje su neprihvatljive prema pravilima jezika. Na primjer, ne možete odvojiti mjerne jedinice od broja (10 ml), oznake godine (54. pne), inicijala od prezimena, razbiti stabilne skraćenice (itd.), itd. Da biste spriječili pretraživač da dodaje crtice na razmak, treba ga zamijeniti neprekidnim razmakom (primjer 5).

Primjer 5: Upotreba

Transferi

Jezero na koordinatama 70° 58′ 19″ S. w. 97° 24′ 5″ E. nalazi se u regiji Taimyr Dolgano-Nenets Krasnojarsk Territory

Rusija.

Svojstvo razmaka specificira kako prikazati razmake između riječi. U normalnim okolnostima, bilo koji broj razmaka u HTML kodu se pojavljuje kao jedan na web stranici. Izuzetak je element

, tekst koji se nalazi u ovom kontejneru izlazi sa svim razmacima, onako kako ga je formatirao korisnik.  Dakle, bijeli prostor simulira rad 
Ali za razliku od njega, ne mijenja font u monospace.

Kratke informacije

Oznake

OpisPrimjer
<тип> Označava tip vrijednosti.<размер>
A && BVrijednosti se moraju ispisati navedenim redoslijedom.<размер> && <цвет>
A | BOznačava da trebate odabrati samo jednu vrijednost od predloženih (A ili B).normalno | small-caps
A || BSvaka vrijednost se može koristiti samostalno ili zajedno s drugima bilo kojim redoslijedom.širina || count
Grupne vrijednosti.[ usev || krst ]
* Ponovite nula ili više puta.[,<время>]*
+ Ponovite jedan ili više puta.<число>+
? Navedeni tip, riječ ili grupa su opcioni.umetnuti?
(A, B)Ponovite najmanje A, ali ne više od B puta.<радиус>{1,4}
# Ponovite jednom ili više puta odvojeno zarezima.<время>#
×

Vrijednosti

normalno Tekst u prozoru pretraživača se prikazuje kao i obično, prelomi redova se postavljaju automatski. Nowrap Razmaci se ne uzimaju u obzir, prelomi redova u HTML kodu se zanemaruju, sav tekst se prikazuje u jednom redu; istovremeno, dodajući
premotava tekst u novi red. pre Tekst se prikazuje uzimajući u obzir sve razmake i crtice, kako ih je dodao programer u HTML kodu. Ako je linija predugačka i ne stane u prozor pretraživača, biće dodana horizontalna traka za pomeranje. Razmaci prije reda se ne uzimaju u obzir u tekstu; tekst se automatski pomjera u sljedeći red ako se ne uklapa u navedeno područje. pre-wrap Svi razmaci i prijelomi su sačuvani u tekstu, međutim, ako širina reda ne stane u navedeno područje, tekst će automatski biti premotan u sljedeći red.

Utjecaj vrijednosti na tekst prikazan je u tabeli. 1.

Primjer

razmak

Primjer

Fermatova posljednja teorema
X n+ Y n= Z n
gdje je n cijeli broj > 2

Rezultat ovog primjera prikazan je na sl. 1.

Rice. 1. Primjena svojstva razmaka

Objektni model

Objekat.style.whiteSpace

Napomena

Browser Internet Explorer do verzije 7.0 uključujući ne podržava pre-line i pre-wrap vrijednosti. Za