[text] CSS - text-align-last 속성 - 단락마지막라인정렬 (= text-align-last속성 = 텍스트얼라인라스트속성)

1. text-align-last 예제 - 단락 마지막 라인 정렬
2. text-align-last 정의
3. text-align-last 구문

text-align-last 예제 - 단락 마지막 라인 정렬 

 

<style>

div.a {

  text-align: justify; /* Edge */

  -moz-text-align-last: right; /* Firefox 58.0 이전 */

  text-align-last: right;

}

div.b {

  text-align: justify; /*  Edge */

  -moz-text-align-last: center; /* Firefox 58.0 이전 */

  text-align-last: center;

}

div.c {

  text-align: justify; /* Edge */

  -moz-text-align-last: justify; /* Firefox 58.0 이전 */

  text-align-last: justify;

}

</style>

<h2>text-align-last: right:</h2>

<div class="a">

  <p>홈짱닷컴 Homzzang.com 홈페이지 제작관리 유지보수 강의 HTML CSS JS JQEURY PHP SQL 코딩언어 그누보드 영카트 배추빌더 아미나 서버관리 강의</p>

</div>

<h2>text-align-last: center:</h2>

<div class="b">

  <p>홈짱닷컴 Homzzang.com 홈페이지 제작관리 유지보수 강의 HTML CSS JS JQEURY PHP SQL 코딩언어 그누보드 영카트 배추빌더 아미나 서버관리 강의</p>

</div>

<h2>text-align-last: justify:</h2>

<div class="c">

  <p>홈짱닷컴 Homzzang.com 홈페이지 제작관리 유지보수 강의 HTML CSS JS JQEURY PHP SQL 코딩언어 그누보드 영카트 배추빌더 아미나 서버관리 강의</p>

</div>

 

결과보기

text-align-last 정의

 

단락 마지막 라인의 정렬 지정.

 

---

 

1.

<div> 하나에 3개의 <p>가 있는 경우, 각 <p>의 마지막 라인에 각각 적용됨.

 

2.

기본값: auto

상속여부: O

애니효과: X

CSS버전: CSS3

JS구문: object.style.textAlignLast="right"

 

3.

주요 최신 브라우저 모두 지원. (단, Safari 지원 X)

IE/Edge 경우, start 및 end 속성값 지원 X

 

text-align-last 구문 

 

selector {text-align-last: auto|left|right|center|justify|start|end|initial|inherit;}

 

---

[속성값]

 

auto

자동 정렬. (기본값)

left

왼쪽 정렬.

 

right

오른쪽 정렬.

 

center

가운데 정렬.

 

justify

균등 배분 정렬.

 

start

라인 시작쪽에 정렬. (direction:ltr 경우 왼쪽 정렬, direction:rtl 경우 오른쪽 정렬).

 

end

라인 끝쪽에 정렬. (direction:ltr 경우 오른쪽 정렬, direction:rtl 경우 왼쪽 정렬)

 

initial

이 속성을 기본값으로 설정. 

 

inherit

부모요소의 속성값 상속.