[css] CSS - hanging-punctuation 속성 - 문장부호 위치 지정 (= hanging-punctuation속성 = 행잉펑크츄에이션속성)

목차

1. hanging-punctuation 예제 - 첫 줄 시작 외부에 구두점 배치
2. hanging-punctuation 정의
3. hanging-punctuation 구문

hanging-punctuation 예제 - 첫 줄 시작 외부에 구두점 배치

 

p {

  hanging-punctuation: first;

}

 

hanging-punctuation 정의

 

문장 부호를 텍스트의 전체 줄 시작 또는 끝에서 줄 상자 외부에 둘 수 있는지 여부를 지정.

 

---

 

1.

기본값: none

상속여부: O

애니효과: X

CSS버전: CSS3

JS구문: object.style.hangingPunctuation="first"

 

2.

Safari 최신 브라우저만 지원.

(주요 브라우저 모두 지원 X)

 

3.

MDN hanging-punctuation 예제 보기

 

hanging-punctuation 구문

 

selector {hanging-punctuation: none|first|last|allow-end|force-end|initial|inherit;}

 

---

[속성값]

 

none

구두점은 전체 텍스트 줄의 시작 또는 끝에서 줄 상자 외부에 배치할 수 없음. (기본값)

first

구두점은 첫 번째 줄의 시작 가장자리 밖에 위치 가능.

last

구두점은 마지막 줄의 끝 가장자리 밖에 위치 가능.

allow-end

구두점이 양쪽 맞춤 전에 맞지 않는 경우 구두점이 모든 줄의 끝 가장자리 바깥쪽에 위치 가능.

force-end

구두점은 모든 줄의 끝 가장자리 바깥쪽에 위치 가능. 

이 줄에서 양쪽 맞춤이 활성화되면 구두점이 강제로 중단됨.

initial

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

inherit

부모요소의 속성값 상속.

 

---

[속성값 조합 가능]

 

/* 1개 */

hanging-punctuation: none;

hanging-punctuation: first;

hanging-punctuation: last;

hanging-punctuation: force-end;

hanging-punctuation: allow-end;

/* 2개 혼용 */

hanging-punctuation: first force-end;

hanging-punctuation: first allow-end;

hanging-punctuation: first last;

hanging-punctuation: last force-end;

hanging-punctuation: last allow-end;

/* 3개 혼용 */

hanging-punctuation: first force-end last;

hanging-punctuation: first allow-end last;

/* 전역값 */

hanging-punctuation: inherit;

hanging-punctuation: initial;

hanging-punctuation: revert;

hanging-punctuation: unset;