목차
- hyphenate-character 예제 - 하이픈 줄바꿈 시, 라인 끝 하이픈 모양 지정
- hyphenate-character 정의
- 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­ordinary Homzzang.com</div>
<div class="b">A extra­ordinary Homzzang.com</div>
<div class="c">A extra­ordinary Homzzang.com</div>
<div class="d">A extra­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; 또는, ­)로 지정된 자리에 들어감.
initial
이 속성의 기본값 사용.
inherit
부모요소의 속성값 상속.