Justowanie tekstu - CSS-Tricks

Anonim

text-justifyNieruchomość w CSS jest towarzyszem do text-alignnieruchomości, która jest używana do ustawienia sposobu usprawiedliwiania tekstu, gdy text-alignjest ustawiony na justifywartość.

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

Wartości

  • inter-word: Określa, że ​​tekst jest wyrównywany przez dostosowanie odstępów między wyrazami, skutecznie tworząc dodatkowe odstępy między wyrazami. W rzeczywistości jest to odmiana word-spacingwłaściwości.
  • inter-character: Określa, że ​​tekst jest justowany przez dostosowanie odstępów między znakami, skutecznie tworząc dodatkowe odstępy między znakami. W rzeczywistości jest to odmiana letter-spacingwłaściwości.
  • auto: Pozwala przeglądarce określić, czy justowanie jest lepiej obsługiwane jako inter-wordlub inter-character. Może to być pomocne w scenariuszach wielojęzycznych, w których język treści jest nieznany do czasu renderowania, umożliwiając agentowi użytkownika przeglądarki odpowiedni wybór w oparciu o metodę lepiej pasującą do kontekstu językowego.
  • none: Wyłącza metody uzasadniania, skutecznie usuwając wszelkie możliwości uzasadnienia lub nadpisując, gdy metoda uzasadniania może wystąpić w kaskadzie.

Czym właściwie jest usprawiedliwienie?

Wyjustowany tekst to fantazyjny sposób na określenie, w jaki sposób tekst wypełnia pole, które go zawiera. W rzeczywistości możesz już dobrze znać tekst uzasadniający i nawet go nie znać. Jeśli kiedykolwiek korzystałeś z oprogramowania do edycji tekstu, takiego jak Word i Dokumenty Google, być może znasz te ikony:

Opcje wyrównywania i justowania tekstu na pasku narzędzi Dokumentów Google

Te pierwsze trzy ustawiają wyrównanie tekstu, podobnie jak text-alignwłaściwość CSS , w której tekst może być wyrównany do lewej, prawej lub całkowicie wyśrodkowany.

Ta czwarta ikona jest opcją justowania i mówi treści, aby wypełniła całą szerokość dokumentu, tak aby każdy wiersz był wyrównany do krawędzi, niezależnie od tego, czy wpływa to na odstępy między wyrazami.

Justowanie treści w Dokumentach Google powoduje dodanie odstępów między wyrazami, aby zająć całą szerokość dokumentu w każdym wierszu

text-justifyWłaściwość pozwala nam zrobić to samo, ale z dodatkową elastyczność w celu ustalenia, czy metoda rozstaw wykorzystywane do uzasadnienia treść jest zarządzany między słowami lub znakami.

Wsparcie przeglądarki

text-justifyNieruchomość jest wliczone w CSS Text Moduł Level 3 specyfikacji, która jest obecnie w projekcie statusu redaktora w momencie pisania tego tekstu.

Ta właściwość jest obecnie wymieniona jako „zagrożona” wycofaniem w okresie rekomendacji dla kandydatów. W związku z tym nie zaleca się używania tej właściwości w środowisku produkcyjnym, ponieważ jest mało prawdopodobne, aby w najbliższej przyszłości została ona przyjęta jako standard we wszystkich przeglądarkach.

Bieżące wsparcie jest ograniczone do przeglądarki Firefox 55+. Internet Explorer 11 i Edge 14+ również obsługują tę właściwość, ale tylko inter-wordwartość i nieoficjalne wartości nie zawarte w specyfikacji W3C.

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
Nie 55 11 18 Nie

Telefon komórkowy / tablet

Android Chrome Android Firefox Android iOS Safari
Nie 85 Nie Nie