Text-justify - CSS-Tricks

Anonim

text-justifyProprietatea în CSS este un companion la text-alignproprietate , care este folosit pentru a seta metoda de justificare a textului atunci când text-aligneste setat la justifyvaloarea.

p ( text-align: justify; text-justify: inter-word; )

Valori

  • inter-word: Specifică faptul că textul este justificat prin ajustarea spațiului dintre cuvinte, creând în mod eficient spațiere suplimentară între cuvinte. Aceasta este efectiv o variație a word-spacingproprietății.
  • inter-character: Specifică faptul că textul este corectat prin ajustarea spațiului dintre caractere, creând în mod eficient spațierea suplimentară a caracterelor. Aceasta este efectiv o variație a letter-spacingproprietății.
  • auto: Permite browserului să stabilească dacă justificarea este tratată mai bine ca inter-wordsau inter-character. Acest lucru poate fi util în scenarii multilingve în care limba conținutului este necunoscută până la redare, permițând agentului utilizatorului browserului să aleagă în mod corespunzător în funcție de metoda care se potrivește mai bine contextului lingvistic.
  • none: Dezactivează metodele de justificare, eliminând în mod eficient orice oportunități de justificare sau suprascriind acolo unde poate apărea o metodă de justificare în cascadă.

Ce anume este justificarea?

Textul justificat este un mod fantezist de a spune cum textul umple caseta care îl conține. De fapt, este posibil să fiți deja familiarizați cu textul justificativ și nici măcar să nu-l știți. Dacă ați folosit vreodată software de editare a textului, cum ar fi Word și Google Docs, atunci este posibil să fiți familiarizați cu aceste pictograme:

Opțiuni de aliniere și justificare a textului în bara de instrumente Google Docs

Primele trei setează alinierea textului, la fel ca text-alignproprietatea CSS , unde textul poate fi aliniat la stânga, la dreapta sau complet centrat.

A patra pictogramă este opțiunea de justificare și indică conținutului să umple întreaga lățime a documentului, astfel încât fiecare linie să fie chiar la margine, indiferent dacă afectează spațiul dintre cuvinte.

Justificarea conținutului din Google Docs adaugă spațierea între cuvinte pentru a ocupa lățimea completă a documentului la fiecare linie

text-justifyProprietatea ne permite să facă același lucru, dar cu mai multă flexibilitate pentru a determina dacă metoda spațierea folosită pentru a justifica conținutul este gestionat între cuvinte sau caractere.

Suport pentru browser

text-justifyProprietatea este inclusă în CSS text Modulul Level 3 caietul de sarcini, care este în prezent în proiectul statutului editorului la momentul scrierii.

Această proprietate este în prezent listată ca „expusă riscului” de a fi abandonată în perioada de recomandare a candidaților. Ca atare, nu se recomandă utilizarea acestei proprietăți în producție, deoarece este puțin probabil să fie adoptată ca standard în toate browserele în viitorul apropiat.

Asistența actuală este limitată la Firefox 55+. Internet Explorer 11 și Edge 14+ acceptă, de asemenea, proprietatea, dar numai inter-wordvaloarea, precum și valorile neoficiale care nu sunt incluse în specificația W3C.

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
Nu 55 11 18 Nu

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
Nu 85 Nu Nu