CSS text-align-last 속성

정의와 사용법

text-align-last 속성은 텍스트의 마지막 줄을 어떻게 정렬할지 정의합니다.

주의하세요, text-align-last 속성은 선택된 요소 내의 모든 마지막 줄을 설정합니다. 따라서, <div>에 세 개의 파라그래프가 있으면, text-align-last는 각 파라그래프의 마지막 줄에 적용됩니다. text-align-last를 컨테이너의 마지막 문단에 사용하려면 :last child를 사용할 수 있습니다. 아래 예제를 참조하세요.

주석:Edge/Internet Explorer에서 text-align-last 속성은 "text-align: justify"를 가진 텍스트에만 적용됩니다.

추가로 참조:

CSS 강의:CSS 텍스트

HTML DOM 참조 설명서:textAlignLast 속성

예제

정렬 세 개의 <div> 요소의 마지막 줄:

div.a {
  text-align: justify;  /* 针对 Edge */
  text-align-last: right;
}
div.b {
  text-align: justify; /* Edge에 대한 */ 
  text-align-last: center;
}
div.c {
  text-align: justify; /* Edge에 대한 */ 
  text-align-last: justify;
}

직접 시도해 보세요

페이지 하단에 더 많은 TIY 예제를 찾을 수 있습니다.

CSS 문법

text-align-last: auto|left|right|center|justify|start|end|initial|thừa kế;

속성 값

값 설명
auto

기본 값. 각 줄의 정렬 규칙은 text-align의 값에 의해 결정됩니다.

text-align의 값이 justify인 경우, text-align-last의 동작은 start을 설정한 것과 같습니다.
left 마지막 줄이 왼쪽에 정렬됩니다.
right 마지막 줄이 오른쪽에 정렬됩니다.
center 마지막 줄이 중앙에 정렬됩니다.
justify 마지막 줄의 시작 부분이 내용 상자의 왼쪽에 정렬되고, 끝 부분이 오른쪽에 정렬됩니다.
start

마지막 줄이 줄 시작에 정렬됩니다.

text-direction이 왼쪽에서 오른쪽으로 이동하면 왼쪽 정렬, 오른쪽에서 왼쪽으로 이동하면 오른쪽 정렬입니다.
end

마지막 줄이 줄 끝에 정렬됩니다.

text-direction이 왼쪽에서 오른쪽으로 이동하면 오른쪽 정렬, 오른쪽에서 왼쪽으로 이동하면 왼쪽 정렬입니다.
initial 이 속성을 기본 값으로 설정합니다. 참조 initial。
thừa kế 이 속성을 부모 요소에서 thừa kế합니다. 참조 thừa kế。

기술 세부 사항

기본 값: auto
thừa kế: 예
애니메이션 제작: 지원되지 않습니다. 참조:애니메이션 관련 속성。
버전: CSS3
JavaScript 문법: object.style.textAlignLast="right"

더 많은 예제

컨테이너 내의 마지막 줄에 text-align-last를 사용합니다:

div.b p:last-child {
  text-align-last: center;
}

직접 시도해 보세요

브라우저 지원

표에 기재된 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

-moz-를 포함한 숫자는 접두사를 사용하는 첫 번째 버전을 의미합니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
47.0 5.5* 49.0
12.0 -moz-		 지원되지 않음 34.0

* Edge/Internet Explorer에서 "start"과 "end" 값은 지원되지 않습니다.