Žodžių lūžis - CSS-gudrybės

word-breakCSS turtas gali būti naudojamas pakeisti, kai eilučių turėtų atsirasti. Paprastai eilutės pertraukos tekste gali atsirasti tik tam tikrose vietose, pavyzdžiui, kai yra tarpas arba brūkšnys.

Žemiau pateiktame pavyzdyje galime padaryti word-breaktarp raidžių:

p ( word-break: break-all; )

Jei tada nustatysime teksto plotį į vieną em, žodis sulaužys kiekvieną raidę:

„CodePen“ peržiūrėkite rašiklio „Rašiklio nustatymas“ tekstą vertikaliai su CSS-Tricks (@ css-tricks) žodžių laužymu.

Ši vertė dažnai naudojama vietose, kuriose sukurtas turinys vartotojui, kad ilgos eilutės nerizikuotų sulaužyti maketo. Vienas labai paplitęs pavyzdys yra ilga kopija ir įklijuotas URL. Jei tas URL neturi brūkšnių, jis gali prasidėti už pagrindinio langelio ribų ir atrodyti blogai ar blogiau, sukelti išdėstymo problemų.

„CodePen“ rasite „CSS-Tricks“ (@ css-tricks) „Pen Fixing links with word-break“.

Vertybės

normal: žodžių laužymui naudokite numatytąsias taisykles.
break-all: bet kuris žodis / raidė gali prasiveržti į kitą eilutę.
keep-all: kinų, japonų ir korėjiečių kalbų tekstai nėra sulaužyti. Priešingu atveju tai yra tas pats kaip normal.

Ši savybė taip pat dažnai naudojama kartu su brūkšnių savybe, kad, įvykus pertraukoms, įterpiama brūkšnelis pagal knygų standartą.

Visas naudojimas su reikalingais tiekėjo priešdėliais yra:

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

Šių savybių naudojimas universaliame selektoriuje gali būti naudingas, jei turite svetainę, kurioje yra daug vartotojo sukurto turinio. Nors teisingas įspėjimas, jis gali atrodyti keistai dėl pavadinimų ir iš anksto suformatuoto teksto (

Susijęs

perpildymas-apvyniojimas
brūkšneliai
balta vieta
Ilgų žodžių ir URL tvarkymas

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.