Defises - CSS-triki

Anonim

Par hyphensīpašuma vadības zilbjdali no teksta bloka līmeņa elementiem. Jūs varat novērst defisēšanu vispār, atļaut vai atļaut tikai tad, ja ir noteiktas rakstzīmes.

Ņemiet vērā, ka tas hyphensir jutīgs pret valodu. Tās spēja atrast pārtraukuma iespējas ir atkarīga no valodas, kas definēta langvecāku elementa atribūtā. Pagaidām netiek atbalstītas visas valodas, un atbalsts ir atkarīgs no konkrētā pārlūka.

Sintakse

p ( hyphens: none | manual | auto )

defises: nav

Rindu pārtraukumos vārdi nekad netiek defisēti, pat ja rakstzīmes vārda iekšienē liek domāt, kur varētu vai vajadzētu būt defisācijai.

defises: rokasgrāmata

Vārdi tiek lauzti tikai līniju pārtraukumos, ja vārda iekšpusē ir rakstzīmes, kas norāda uz līnijas pārtraukuma iespējām. Ir divas rakstzīmes, kas norāda uz līnijas pārtraukuma iespēju:

  • U+2010(HYPHEN): “cietais” defise raksturs norāda uz redzamu līnijas pārtraukuma iespēju. Pat ja līnija tajā brīdī faktiski netiek pārtraukta, defise joprojām tiek atveidota. Burtiski “-”.
  • U+00AD(Kautrīgs): neredzams, “mīksts” defise. Šis raksturs netiek attēlots redzami; tā vietā tiek ieteikta vieta, kur pārlūks, ja nepieciešams, varētu izvēlēties vārdu lauzt. HTML formātā varat izmantot, -lai ievietotu mīksto defisi.

defises: auto

Vārdus var salauzt atbilstošos defenēšanas punktos vai nu, kā nosaka defisācijas rakstzīmes (sk. Iepriekš) vārda iekšpusē, vai arī automātiski nosaka valodai atbilstošs defisācijas resurss (ja to atbalsta pārlūks vai nodrošina caur @hyphenation-resource).

Nosakot defisētās rakstzīmes vārda iekšpusē, ja tādas ir, prioritāte ir automātiskajiem resursiem, nosakot vārda defisēšanas punktus.

defises: visas

Novecojis, nelietojiet . Tas bija tikai spec uz laiku testēšanai.

Demonstrācija

Zemāk esošajā demonstrācijā ir virkne rindkopu, un viss ir iestatīts, hyphens: auto;lai parādītu defisācijas jēdzienu. langAtribūts ir iestatīts enuz mātes elementu.

Pārbaudiet šo pildspalvu!

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
88 6 * 10 * 12 * 5,1 *

Mobilais / planšetdators

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

Nepieciešama Safari 5+ -webkit-, Firefox 6+ -moz-, IE 10+ -ms-, iOS 4.2+ nepieciešama -webkit-.

Chrome <55 un Android pārlūks faktiski atbalsta -webkit-hyphens: none, kas ir noklusējuma vērtība, bet neviena no citām vērtībām.

Pārlūkprogrammās Firefox un Internet Explorer automātiskā defisēšana darbojas tikai dažās valodās (definētas ar langatribūtu). Skatiet šo piezīmi, lai iegūtu pilnīgu atbalstīto valodu sarakstu.

Ja rakstāt tīmekļa dokumentu, kuram patiešām ir nepieciešama defise, varat izmantot Hyphenator.js, kas ir bibliotēka, kuras pamatā ir plaša vārdnīca, kas automātiski ievadīs jūsu saturā mīkstas defises un nulles platuma atstarpes.

Bez JavaScript, jums jāpaļaujas uz abiem hyphens, un word-wrap:

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