Razbijanje riječi - CSS-trikovi

word-breakNekretnina u CSS može koristiti za promjenu kada redaka treba da se dogodi. Prekidi redaka u tekstu obično se mogu dogoditi samo u određenim razmacima, na primjer kada postoji razmak ili crtica.

U donjem primjeru word-breakumjesto njih možemo napraviti slova:

p ( word-break: break-all; )

Ako tada postavimo širinu teksta na jedno em, riječ će se slomati za svako slovo:

Tekst olovke pogledajte okomito s prelomom riječi pomoću CSS-trikova (@ css-trikovi) na CodePenu.

Ova se vrijednost često koristi na mjestima sa sadržajem koji generiraju korisnici, tako da dugi nizovi ne riskiraju razbijanje izgleda. Jedan vrlo čest primjer je duga kopija i zalijepljeni URL. Ako taj URL nema crtice, može se proširiti izvan roditeljskog okvira i izgledati loše ili još gore, uzrokovati probleme s izgledom.

Pogledajte veze za učvršćivanje olovke s prijelomom riječi pomoću CSS-trikova (@ css-trikovi) na CodePenu.

Vrijednosti

normal: koristite zadana pravila za razbijanje riječi.
break-all: bilo koja riječ / slovo može se razbiti u sljedeći redak.
keep-all: za kineski, japanski i korejski tekst riječi nisu slomljene. Inače je ovo isto kao normal.

Ovo se svojstvo također često koristi zajedno sa svojstvom crtica, tako da se u slučaju prekida umetne hypen, prema standardu u knjigama.

Potpuna upotreba, s potrebnim prefiksima dobavljača, je:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

Korištenje ovih svojstava na univerzalnom selektoru može biti korisno ako imate web mjesto s puno korisničkog sadržaja. Iako pošteno upozorenje, može izgledati čudno na naslovima i unaprijed oblikovanom tekstu (

Povezano

overflow-wrap
crtice
bijeli prostor
Rukovanje dugim riječima i URL-ovima

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.