Cratime - CSS-Tricks

Anonim

De hyphensControalele 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ă hyphenseste sensibil la limbă. Capacitatea sa de a găsi oportunități de pauză depinde de limbaj, definit în langatributul 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. langAtributul este setat enpe 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 langatributul). 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; )