[DOM_Style] JS - textOverflow 속성 - 영역 벗어난 글자 처리 (= 영역이탈글자처리 = 텍스트오버플로속성 = text-overflow속성. IE6)

textOverflow 예제

 

<style> 

#hz {

  border: 1px solid black;

  background-color: yellow;

  width: 120px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: visible;

}

</style>

<button onclick="homzzang()">클릭</button>

<div id="hz">홈짱닷컴 Homzzang.com</div>

<script>

function homzzang() {

  document.getElementById("hz").style.textOverflow = "ellipsis";

}

</script>

 

결과보기

textOverflow 정의 

 

영역 벗어난 글자 처리 반환/설정 

 

---

 

1.

기본값: clip

반환값: text-overflow 나타내는 문자열

CSS버전: CSS3

2.

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

단, 사용자정의문자열 속성값은 Firefox만 지원.. 

 

textOverflow 구문 

 

[반환]

object.style.textOverflow 

 

[설정]

object.style.textOverflow = "clip|ellipsis|string|initial|inherit"

 

---

[속성값]

 

clip

텍스트 자르고, 잘린 텍스트에 접근 불가.

 

ellipsis

줄임표 ( "...") 추가해 짤린 텍스트임을 표시.

 

string

사용자정의 문자열로 잘린 텍스트임을 표시. (Firefox만 지원)

 

initial

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

 

inherit

부모요소의 속성값 상속.