AAtomic CSS

text-align-last

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

클래스 목록

클래스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

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

사용 예시

<!-- 양쪽 정렬 + 마지막 줄 가운데 -->
<p class="taj talc">
  긴 텍스트의 마지막 줄이 가운데에 정렬됩니다.
  여러 줄로 구성된 단락에서 효과를 볼 수 있습니다.
</p>

<!-- 양쪽 정렬 + 마지막 줄 오른쪽 -->
<p class="taj talr">
  마지막 줄이 오른쪽으로 정렬됩니다.
  서명이나 날짜 표시에 유용합니다.
</p>

팁 & 주의사항

taj와 함께 사용

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

text-aligntexttypography