[css] CSS - hyphenate-character 속성 - 하이픈 줄바꿈 시, 라인 끝 하이픈 모양 지정 (= hyphenate-characte속성 = 하이퍼네이트캐릭터

1. hyphenate-character 예제 - 하이픈 줄바꿈 시, 라인 끝 하이픈 모양 지정
2. hyphenate-character 정의
3. hyphenate-character 구문

hyphenate-character 예제 - 하이픈 줄바꿈 시, 라인 끝 하이픈 모양 지정

 

<style>

div { 

  width: 110px;

  border: 1px solid gray;

  hypens: auto;

  padding:10px;

}

 

div.a {hyphenate-character: auto;}

div.b {hyphenate-character: "=";}

div.c {hyphenate-character: "/";}

div.d {hyphenate-character: "_";}

</style>

<div class="a">A extra&shy;ordinary Homzzang.com</div>

<div class="b">A extra&shy;ordinary Homzzang.com</div>

<div class="c">A extra&shy;ordinary Homzzang.com</div>

<div class="d">A extra&shy;ordinary Homzzang.com</div>

 

hyphenate-character 정의

 

긴 단어가 하이픈 줄바꿈 시, 라인 끝 하이픈 모양 지정.

 

---

 

1.

• 줄바꿈 없을 시 하이픈 삽입 X
• hypens 속성값이 manual 이거나 auto일 때 작동.

 

2.

• 기본값: auto
• 상속여부: O
• 애니가능: X
• CSS버전: CSS4
• JS구문: object.style.hyphenateCharacter="/";

 

3.

IE 제외한 주요 최신 브라우저 모두 지원.

 

4. MDN 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-character

 

hyphenate-character 구문

 

selector {hyphenate-character: auto|string|initial|inherit;}

 

---

[속성값]

 

auto

브라우저가 자동 결정. (기본값)

 

string

하이픈 줄바꿈 시, 사용자가 지정한 문자 사용.

• 라인 줄바꿈 시 라인 끝에 사용자가 (&hyphens; 또는, &shy;)로 지정된 자리에 들어감.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.