CSS3의 text-align-last 속성은 블록 요소 내 텍스트의 마지막 줄(또는 강제 줄바꿈 직전의 줄)이 어떻게 정렬될지 지정합니다. 일반적인 text-align 속성이 문단 전체의 정렬을 담당하는 반면, text-align-last는 마지막 줄에만 별도의 정렬 방식을 적용할 수 있어 양쪽 정렬(justify)된 긴 글에서 시각적 균형을 잡을 때 특히 유용합니다.
주요 속성값
- auto – 기본값으로,
text-align속성의 설정을 따릅니다. - start / end – 텍스트 쓰기 방향의 시작점 또는 끝점을 기준으로 정렬합니다.
- left / right – 각각 왼쪽 또는 오른쪽으로 정렬합니다.
- center – 마지막 줄을 가운데 정렬합니다.
- justify – 마지막 줄도 양쪽 끝에 맞춰 늘려 정렬합니다.
사용 예제
아래 코드는 text-align-last: right;를 적용하여 문단의 마지막 줄을 오른쪽으로 정렬하는 예제입니다. 직접 실행해 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.mydiv {
text-align-last: right;
}
</style>
</head>
<body>
<h1>text-align-last 속성 예제</h1>
<div class="mydiv">
<p>text-align-last 속성을 사용하면 문단의 마지막 줄만 별도로 정렬할 수 있습니다. 이 데모 텍스트는 마지막 줄이 오른쪽으로 정렬되는 모습을 보여줍니다.</p>
</div>
</body>
</html>
브라우저 호환성 참고 사항
text-align-last는 브라우저마다 지원 수준이 다릅니다. Firefox는 오랫동안 접두사 없이 지원해 왔으며, Chrome 계열 브라우저에서는 -webkit-text-align-last 형태의 접두사를 함께 사용하거나 부모 요소에 text-align: justify가 설정되어야 정상적으로 동작하는 경우가 있습니다. 실무에서는 아래와 같이 벤더 접두사를 병행해 작성하는 것이 안전합니다.
.mydiv {
-webkit-text-align-last: right; /* Chrome, Safari 등 */
text-align-last: right; /* 표준 문법 */
}
프로젝트 대상 브라우저의 지원 여부를 먼저 확인하고 사용하면, 의도하지 않은 정렬 깨짐 현상을 예방할 수 있습니다.