Sõnamurd - CSS-trikid | CSS-i almanahh 2025

word-breakVara CSS saab muuta, kui reavahetused peaks tekkida. Tavaliselt võivad tekstimurded toimuda ainult teatud ruumides, näiteks tühiku või sidekriipsu olemasolul.

Allpool toodud näites saame word-breakselle asemel teha tähtede vahele:

p ( word-break: break-all; )

Kui määrame teksti laiuseks ühe em, jagub sõna iga tähe järgi:

Vaadake CodePenil CSS-Tricks (@ css-tricks) abil teksti Pliiatsi sätted vertikaalselt sõnamurdega.

Seda väärtust kasutatakse sageli kohtades, kus on kasutaja loodud sisu, nii et pikad stringid ei riski paigutust rikkuda. Üks väga levinud näide on pikk koopia ja kleebitud URL. Kui sellel URL-il pole sidekriipse, võib see ulatuda vanematekastist kaugemale ja tunduda halb või halvem, põhjustada paigutusprobleeme.

Vaadake CodePeni lehel CSS-Tricks (@ css-tricks) kasutatavat sõnaühenditega lingide parandamise pliiatsi.

Väärtused

normal: kasutage sõnade purustamiseks vaikereegleid.
break-all: mis tahes sõna / täht võib murda järgmisele reale.
keep-all: hiina, jaapani ja koreakeelsed tekstisõnad pole katki. Muidu on see sama mis normal.

Seda omadust kasutatakse sageli ka sidekriipsude omadusega, nii et katkestuste korral lisatakse raamatus sisalduva standardi järgi sidekriips.

Täielik kasutus koos vajalike hankija eesliidetega on:

 -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;

Nende omaduste kasutamine universaalsel valijal võib olla kasulik, kui teil on sait, kus on palju kasutajate loodud sisu. Ehkki õiglane hoiatus, võib see pealkirjade ja eelvormindatud teksti (

Seotud

ülevoolu-mähis
sidekriipsud
tühik
Pikkade sõnade ja URL-ide käitlemine

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.