De hyphens
Controalele de proprietate în silabe a textului în elemente de nivel bloc. Puteți împiedica deloc cratimarea, permiteți-o sau permiteți-o doar atunci când sunt prezente anumite caractere.
Rețineți că hyphens
este sensibil la limbă. Capacitatea sa de a găsi oportunități de pauză depinde de limbaj, definit în lang
atributul unui element părinte. Nu toate limbile sunt încă acceptate, iar asistența depinde de browserul specific.
Sintaxă
p ( hyphens: none | manual | auto )
cratime: niciuna
Cuvintele nu sunt împărțite niciodată la pauzele de linie, chiar dacă caracterele din interiorul cuvântului sugerează unde ar putea sau ar trebui să meargă împărțirea.
cratime: manuală
Cuvintele sunt întrerupte numai la întreruperile de linie în care există caractere în interiorul cuvântului care sugerează oportunități de întrerupere a liniei. Există două caractere care sugerează oportunitatea de întrerupere a liniei:
U+2010
(HYPHEN): caracterul „hard” cratimă indică o oportunitate vizibilă de întrerupere a liniei. Chiar dacă linia nu este de fapt ruptă în acel moment, cratima este încă redată. Literal un „-“.U+00AD
(SHY): o cratimă invizibilă, „moale”. Acest personaj nu este redat vizibil; în schimb, sugerează un loc în care browserul ar putea alege să rupă cuvântul, dacă este necesar. În HTML, puteți utiliza-
pentru a insera o cratimă ușoară.
cratime: auto
Cuvintele pot fi sparte la punctele de cratimare corespunzătoare, fie determinate de caractere de cratimare (a se vedea mai sus) în interiorul cuvântului, fie determinate automat de o resursă de cratimare adecvată limbii (dacă este acceptată de browser sau furnizată prin intermediul @hyphenation-resource
).
Caracterele de cratimare condiționată din interiorul unui cuvânt, dacă sunt prezente, au prioritate față de resursele automate atunci când se determină punctele de cratimare din cuvânt.
cratime: toate
Învechit, nu utilizați . Acest lucru a fost doar în specificație temporar pentru testare.
Demo
Demo-ul de mai jos are o grămadă de paragrafe și totul este setat pentru hyphens: auto;
a demonstra conceptul de cratimare. lang
Atributul este setat en
pe elementul părinte.
Verificați acest stilou!
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
Crom | Firefox | IE | Margine | Safari |
---|---|---|---|---|
88 | 6 * | 10 * | 12 * | 5.1 * |
Mobil / Tabletă
Android Chrome | Android Firefox | Android | Safari iOS |
---|---|---|---|
88 | 85 | 81 | 4.2-4.3 * |
Safari 5+ necesită -webkit-
, Firefox 6+ necesită -moz-
, IE 10+ necesită -ms-
, iOS 4.2+ necesită -webkit-
.
Chrome <55 și browserul Android acceptă de fapt -webkit-hyphens: none
, care este valoarea implicită, dar niciuna dintre celelalte valori.
În Firefox și Internet Explorer, cratima automată funcționează numai pentru anumite limbi (definite cu lang
atributul). Consultați această notă pentru o listă cuprinzătoare de limbi acceptate.
Dacă scrieți un document bazat pe web care are nevoie într-adevăr de cratimare, puteți utiliza Hyphenator.js, care este o bibliotecă bazată pe un dicționar vast care va injecta automat cratime moi și spații cu lățime zero în conținutul dvs.
Fără JavaScript, va trebui să vă bazați pe ambele hyphens
și word-wrap
:
.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )