Crtice - CSS-trikovi

Anonim

Na hyphenskontrole imovine rastavljanje teksta u elementima blok razini. Možete spriječiti da se crtica uopće događa, dopustiti ili dopustiti samo kada su prisutni određeni znakovi.

Imajte na umu da hyphensje osjetljiv na jezik. Njegova sposobnost pronalaženja mogućnosti prekida ovisi o jeziku definiranom u langatributu nadređenog elementa. Još nisu podržani svi jezici, a podrška ovisi o određenom pregledniku.

Sintaksa

p ( hyphens: none | manual | auto )

crtice: nema

Riječi se nikad ne prenose na prelome retka, čak i ako znakovi unutar riječi sugeriraju gdje bi crtica mogla ili trebala ići.

crtice: priručnik

Riječi se lome samo u prelomima redaka gdje se unutar riječi nalaze znakovi koji sugeriraju mogućnosti preloma retka. Dva su znaka koja sugeriraju mogućnost prijeloma retka:

  • U+2010(VEZA): znak „tvrda“ crtica označava vidljivu priliku za prijelom retka. Čak i ako crta u tom trenutku zapravo nije prekinuta, crtica se i dalje prikazuje. Doslovno "-".
  • U+00AD(SRAHLJIVO): nevidljiva, "meka" crtica. Ovaj se lik ne prikazuje vidljivo; umjesto toga, predlaže mjesto na kojem bi preglednik mogao odlučiti razbiti riječ ako je potrebno. U HTML-u možete -umetnuti meku crticu.

crtice: auto

Riječi se mogu lomiti na odgovarajućim točkama za crticu ili kako ih određuju znakovi za crticu (vidi gore) unutar riječi ili kako ih automatski određuje resurs za prebacivanje riječi prikladan za jezik (ako ih podržava preglednik ili pruža putem @hyphenation-resource).

Uvjetni crtice u riječi, ako postoje, imaju prednost nad automatskim resursima pri određivanju točaka crtice u riječi.

crtice: sve

Zastarelo, nemojte koristiti . Ovo je bilo samo u specifikaciji privremeno za testiranje.

Demo

Demonstracija u nastavku sadrži hrpu odlomaka i sve je postavljeno hyphens: auto;da demonstrira koncept crtice. langAtribut je postavljen na enna matičnom element.

Pogledajte ovu olovku!

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
88 6 * 10 * 12 * 5,1 *

Mobitel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 4,2-4,3 *

Safari 5+ zahtijeva -webkit-, Firefox 6+ zahtijeva -moz-, IE 10+ zahtijeva -ms-, iOS 4.2+ zahtijeva -webkit-.

Chrome <55 i Android preglednik zapravo podržavaju -webkit-hyphens: none, što je zadana vrijednost, ali nijedna od ostalih vrijednosti.

U Firefoxu i Internet Exploreru automatsko rastavljanje crtica funkcionira samo za neke jezike (definirano s langatributom). Pogledajte ovu bilješku za opsežni popis podržanih jezika.

Ako pišete internetski dokument kojem je stvarno potrebno rastavljanje crtica, možete upotrijebiti Hyphenator.js koja je knjižnica zasnovana na opsežnom rječniku koji će automatski ubrizgati meke crtice i razmake nulte širine u vaš sadržaj.

Bez JavaScript-a morat ćete se osloniti na oboje hyphensi word-wrap:

.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )