AAtomic CSS

text-justify

text-align: justify로 양끝 정렬을 켰을 때, 남는 공간을 어디에 나눠 넣을지 정합니다. tjw는 서양 텍스트에, tjc는 CJK 텍스트에 적합합니다.

클래스 목록

클래스CSS설명
tjatext-justify: auto브라우저 자동 결정 (기본값)
tjntext-justify: none정렬 비활성화
tjwtext-justify: inter-word단어 사이 간격으로 정렬
tjctext-justify: inter-character글자 사이 간격으로 정렬

시각 데모

네 문단 모두 같은 문장, 같은 폭입니다. 오른쪽 끝이 가지런한지, 그리고 그 대가로 어디가 벌어졌는지 보세요. 첫 문단만 taj가 없습니다.

left, not justified

양끝 정렬은 남는 공간을 어디엔가 밀어 넣어야 오른쪽 끝을 맞출 수 있습니다. 그 공간을 단어 사이에 넣을지 글자 사이에 넣을지가 이 속성이 정하는 전부입니다.

오른쪽 끝이 들쭉날쭉합니다. 이것이 기본값입니다.

justify + inter-word — taj tjw

양끝 정렬은 남는 공간을 어디엔가 밀어 넣어야 오른쪽 끝을 맞출 수 있습니다. 그 공간을 단어 사이에 넣을지 글자 사이에 넣을지가 이 속성이 정하는 전부입니다.

단어 사이가 벌어져 오른쪽 끝이 맞습니다.

justify + inter-character — taj tjc

양끝 정렬은 남는 공간을 어디엔가 밀어 넣어야 오른쪽 끝을 맞출 수 있습니다. 그 공간을 단어 사이에 넣을지 글자 사이에 넣을지가 이 속성이 정하는 전부입니다.

글자 사이까지 벌어져 자간이 눈에 띄게 넓어집니다.

justify + none — taj tjn

양끝 정렬은 남는 공간을 어디엔가 밀어 넣어야 오른쪽 끝을 맞출 수 있습니다. 그 공간을 단어 사이에 넣을지 글자 사이에 넣을지가 이 속성이 정하는 전부입니다.

양끝 정렬을 켜 두고도 조정을 하지 않아 사실상 왼쪽 정렬처럼 보입니다.

<!-- text-justify does nothing without text-align: justify -->
<p class="taj tjw">...</p>
<p class="taj tjc">...</p>
<p class="taj tjn">...</p>

클래스별 상세

tjatext-justify: auto

기본값입니다. 브라우저가 언어와 문자 종류를 보고 알아서 전략을 고릅니다. 다국어가 섞여 어떤 문자가 들어올지 모르는 화면에서는 이 값이 가장 안전합니다.

<!-- Let the browser pick the strategy for the script in use -->
<p class="taj tja maxw60rem lh1-8">
  Multi-language content where you do not control the script.
</p>

tjwtext-justify: inter-word

단어 사이 공백만 늘려 줄을 맞춥니다. 글자 모양과 자간은 건드리지 않아 라틴 문자 본문에서 가장 자연스럽습니다. 다만 긴 단어가 몰린 좁은 칼럼에서는 공백이 과하게 벌어져 세로로 흰 강줄기가 생길 수 있습니다.

<!-- Latin body copy: stretch the spaces, never the words -->
<p class="taj tjw maxw60rem lh1-8">
  Justified English paragraph with even word spacing.
</p>

tjctext-justify: inter-character

글자 사이에도 공간을 나눠 넣습니다. 단어 경계가 없는 한중일 텍스트를 양끝 정렬할 때 필요한 값입니다. 라틴 문자에 쓰면 자간이 늘어나 어색해 보입니다.

<!-- CJK body copy: distribute space between characters -->
<p class="taj tjc maxw60rem lh1-8">
  Justified CJK paragraph where the gaps between glyphs are tuned.
</p>

예전 이름은 distribute였습니다

구형 문서와 일부 엔진에서는 같은 동작을 distribute라는 이름으로 부릅니다. 표준 이름은 inter-character입니다.

tjntext-justify: none

양끝 정렬 자체는 켜 둔 채 간격 조정만 끕니다. 공용 스타일이 걸어 둔 정렬 보정을 특정 블록에서만 되돌릴 때 씁니다.

<!-- Opt out of justification while keeping text-align: justify -->
<p class="taj tjn maxw60rem lh1-8">
  The last line and the ragged edge stay as the browser laid them out.
</p>

실전 예시

taj(text-align: justify)와 함께 사용합니다.

<!-- Western text: word gap justification -->
<p class="taj tjw">
  This is a long paragraph of English text that will be
  justified by adjusting the spacing between words.
</p>

<!-- CJK text: character gap justification -->
<p class="taj tjc">
  This is justified text where the gaps between characters
  are adjusted for alignment.
</p>

잡지식 다단 본문과 약관 블록이 대표적인 사용처입니다.

<!-- Two-column magazine layout: justified columns with hyphenation
     so the extra word spacing never opens up rivers of white -->
<article class="cw28rem cg4rem">
  <p class="taj tjw fs16px lh1-8 c71717A mb2rem">
    ... first paragraph of the feature ...
  </p>
  <p class="taj tjw fs16px lh1-8 c71717A mb2rem">
    ... second paragraph of the feature ...
  </p>
</article>

<!-- Terms and conditions block: dense, formal, edge-to-edge -->
<section class="taj tjw fs13px lh1-7 c71717A maxw72rem">
  ... legal copy ...
</section>

언제 뭘 쓸까?

텍스트 종류추천이유
영어, 유럽어tjw단어 사이 간격으로 정렬
한중일 (CJK)tjc글자 사이 간격으로 정렬
혼합 텍스트tja브라우저가 자동 판단

팁 / 주의사항

text-align: justify가 없으면 아무 일도 일어나지 않습니다

이 속성은 양끝 정렬된 줄에만 적용됩니다. taj 없이 tjw만 붙이면 완전히 무시됩니다. 가장 흔한 실수입니다.

마지막 줄은 정렬되지 않습니다

문단의 마지막 줄은 기본적으로 양끝 정렬 대상이 아닙니다. 마지막 줄까지 늘리려면 text-align-last를 따로 지정해야 합니다.

브라우저 지원이 고르지 않습니다

text-justify는 Safari에서 지원되지 않습니다. Safari는 taj의 기본 정렬 동작만 적용하므로, tjw나 tjc는 개선이지 보장이 아니라고 생각해야 합니다.

좁은 칼럼에서는 하이픈이 필요합니다

폭이 좁을수록 한 줄에 밀어 넣는 공백이 커져 단어 사이가 흉하게 벌어집니다. 라틴 본문이라면 hyphens와 함께 쓰고, 칼럼 폭을 너무 좁히지 마세요.

text-aligntext-orientationword-breakwhite-spaceletter-spacingtypography