CSS의 text-align-last 속성은 블록 요소 안에서 텍스트의 마지막 줄이 어떻게 정렬될지를 지정합니다. 일반적인 text-align 속성은 모든 줄에 적용되지만, text-align-last를 사용하면 마지막 줄만 별도로 정렬할 수 있어 문단 스타일을 더 세밀하게 제어할 수 있습니다.
text-align-last의 주요 속성값
- auto – 기본값으로, text-align 속성의 설정을 그대로 따릅니다.
- start / end – 텍스트 쓰기 방향에 따라 시작 또는 끝 위치에 정렬합니다.
- left / right – 각각 왼쪽 또는 오른쪽으로 정렬합니다.
- center – 가운데 정렬합니다.
- justify – 양쪽 정렬하여 마지막 줄도 좌우로 늘립니다.
예제 코드
아래 예제는 div 요소 내부 문단의 마지막 줄을 오른쪽으로 정렬하는 코드입니다. 직접 실행해 보면서 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.mydiv {
text-align-last: right;
}
</style>
</head>
<body>
<h1>text-align-last Property</h1>
<div class = "mydiv">
<p>This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text.</p>
</div>
</body>
</html>실행 결과
브라우저 호환성 참고 사항
text-align-last 속성은 Chrome, Firefox, Edge 등 대부분의 최신 브라우저에서 잘 지원됩니다. 다만 구버전 브라우저나 특정 환경에서는 -moz-text-align-last와 같은 벤더 접두사가 필요할 수 있으므로, 실무에서 크로스 브라우징을 고려한다면 호환성 표를 꼭 확인한 후 사용하는 것이 좋습니다.