AAtomic CSS

text-align-last

양쪽 정렬(text-align: justify) 텍스트에서 마지막 줄의 정렬 방식을 제어합니다. 일반 텍스트에도 적용되지만, 주로 양쪽 정렬과 함께 사용합니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
talntext-align-last: auto브라우저 기본값. text-align 속성을 따름
talltext-align-last: left마지막 줄을 왼쪽 정렬
talrtext-align-last: right마지막 줄을 오른쪽 정렬
talctext-align-last: center마지막 줄을 가운데 정렬
taljtext-align-last: justify마지막 줄도 양쪽 정렬

시각적 비교

양쪽 정렬 텍스트에서 마지막 줄이 어떻게 정렬되는지 비교합니다.

auto (기본값) — taln

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.

left — tall

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.

right — talr

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.

center — talc

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.

justify — talj

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.

사용 예시

<!-- Justify + center last line -->
<p class="taj talc">
  The last line of long text is centered.
  The effect is visible in multi-line paragraphs.
</p>

<!-- Justify + right-align last line -->
<p class="taj talr">
  The last line is right-aligned.
  Useful for signatures or date displays.
</p>

팁 & 주의사항

taj와 함께 사용

text-align-last는 taj(text-align: justify)와 조합할 때 가장 유용합니다. 마지막 줄만 별도로 정렬을 지정할 수 있습니다.

text-aligntexttypography