개체에서 문자의 넘처흐름을 표시하는 방식값을 반환하거나 설정한다.

인수

cssSelector : (스타일 선택자)

속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)

스타일 속성은 개체 속에서 문자의 변환 표현 방식을 나타내는 문자열이다.

이 값은 내용이 주어진 배치 지역에서 넘쳐흘렀을 때, ...(ellipsis)을 디스플레이 할 것인가를 나타낸다.

ellipsis	넘쳐흐른 내용 대신 ...을 디스플레이한다.
clip	디폴트이며, 넘쳐흐른 내용을 단순히 잘라내고 디스플레이하지 않는다.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 clip이다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

이 속성은 인라인 방향 텍스트 흐름(영어에서 보통 수평)에만 적용된다. 인라인 넘처흐름은 인라인에서 텍스트 너비가 넘쳐흐를 크기의 너비이고 줄바꿈하지 않을 때 나타난다. 강제적인 넘처흐름과 ...을 표시하려면, 엘레멘트에 whiteSpace 속성값 nowrap을 설정하거나, 내용을 <NOBR> 태그로 감싸야 한다. 개체의 내용 너비가 좁거나 한 단어가 길어서 줄바꿈 기회가 없으면, 넘처흐름이 nowrap이 적용되기 전에 이루어 질 수 있다.

넘쳐흐름에 ...(ellipsis)을 표시하려면 엘레멘트에 이 속성을 visible 이외의 값으로 설정하여야 한다. 좋은 방법은 overflow를 hidden으로 설정하는 것이다. overflow를 scroll이나 auto로 설정하여도 되나, 스크롤바가 생겨 디스플레이된다.

감춰진 텍스트는 ...(ellipsis)를 선택하므로서 선택될 수 있다. 선택될 때는 ...가 사라지고 배치 지역이 확되되고 텍스트가 나타난다.

이 속성은 DHTML에서 효과적인 ... 생성 대체 방식을 제공한다. ...(ellipsis)는 한 페이지에서 여러번 나올 수 있고, 이를 사용하므로서 속도 향상에 상당한 효과를 줄 수 있다.

적용

개체	script	CSS	IE 버전

참조

이 속성은 CSS(Cascading Style Sheets)에 Microsoft가 확장한 것이다.

textOverflow 속성 ellipsis(...)와 clip값을 비교하고, textOverflow가 overflow 속성을 visible로 설정하여 취소됨을 보여준다.

<STYLE>
.to1box{position:relative;height:60;top:5;color:blue;}
.to2box{position:absolute;left:0;top:20;color:black;width:250;height:30;border:1 solid blue;font:16 궁서;color:brown;}
</STYLE>
<DIV style="color:teal;font-weight:bold;">CSS text-overflow 속성의 효과 예제</DIV>
<DIV class=to1box>style="text-overflow:clip;overflow:hidden"
<DIV class=to2box style="overflow:hidden;text-overflow:clip">
<NOBR>개체에서 문자의 넘처흐름을 표시하는 방식값을 반환하거나 설정한다.</NOBR>
</DIV>
</DIV>
<DIV class=to1box>style="text-overflow:ellipsis;overflow:hidden"
<DIV class=to2box style="overflow:hidden;text-overflow:ellipsis">
<NOBR>개체에서 문자의 넘처흐름을 표시하는 방식값을 반환하거나 설정한다.</NOBR>
</DIV>
</DIV>
<DIV class=to1box>style="text-overflow:ellipsis;overflow:visible"
<DIV class=to2box style="overflow:visible;text-overflow:ellipsis">
<NOBR>개체에서 문자의 넘처흐름을 표시하는 방식값을 반환하거나 설정한다.</NOBR>
</DIV>
</DIV>