[css] CSS - hyphens 속성 - 긴 텍스트 단어에서 하이픈 표시 방법 지정 (= hyphens속성 = 하이픈스속성/하이픈즈속성)

1. hyphens 예제 - 긴 텍스트 단어에서 하이픈 처리 방법 지정
2. hyphens 정의
3. hyphens 구문

hyphens 예제 - 긴 텍스트 단어에서 하이픈 처리 방법 지정

 

<style>

div { width: 100px; border: 1px solid black;} 

div.a {hyphens: none;}

div.b {hyphens: manual;}

div.c {hyphens: auto;}

</style>

<div class="a">An extra&shy;ordinarily good Homzzang.com</div>

<div class="b">An extra&shy;ordinarily good Homzzang.com</div>

<div class="c">An extra&shy;ordinarily good Homzzang.com</div>

 

결과보기

hyphens 정의

 

여러 줄에 걸치는 긴 텍스트 단어에서 하이픈(-) 처리 방법 지정.

 

---

 

1.

• 하이픈 규칙은 언어마다 다르며, HTML lang 속성 이용해 언어 지정.
• XML 경우, xml:lang (en-US) 속성 사용.
• hyphenate-character 속성 - 사용자가 하이픈 모양을 선택 지정.

 

2.

• 기본값: manual
• 적용대상: 모든 요소
• 상속여부: O
• 애니가능: X
• CSS버전: CSS3
• JS구문: object.style.hyphens="none";

 

3.

IE10 이상 주요 최신 브라우저 모두 지원.

 

4. MDN hyphens 예제보기

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

 

hyphens 구문

 

selector {hyphens: none|manual|auto|initial|inherit;}

 

---

[속성값]

 

none

단어에 하이픈 사용 X

 

manual

필요 시, 사용자가 텍스트 단어에 하이픈 실체값(&hyphen; 또는 &shy;)넣은 지점에서 하이픈 사용. ※ 소프트 하이픈 (Soft Hyphens)이라 함.

 

auto

필요 시, 브라우저가 자동 결정.

 

initial

이 속성값의 초기값 사용.

 

inherit

부모요소의 속성값 상속