웹, html, css, javascript - 말줄임 Ellipsis 표시하기

Ellipsis 라는것은 말줄임표시를 뜻한다.

 

웹에서 그리드를 구현하다보면, 정해진 컬럼 사이즈보다 컨텐츠의 텍스트 길이가 긴 경우,

줄바꿈이 되어 2줄로 나오거나, 컬럼사이즈가 늘어나거나 한다.

 

이때, 컬럼사이즈는 고정을 시키고, 줄바꿈이나, 컬럼이 늘어나지 않게 하는 방법이

CSS 의 text-overflow 의 ellipsis 속성 값이다.

 

스타일 속성을 아래와 같이 정의한다.

 

<style> .ShowEllipsisTooltip {     overflow:hidden;     text-overflow:ellipsis;     white-space:nowrap; } </style>

 

이제 그리드 컨텐츠 부분의 class 속성을 위에서 만든 스타일을 적용하면 된다.

 

<td class="ShowEllipsisTooltip">컨텐츠 내용 어쩌고 저쩌고</td>

 

이제 웹브라우저 화면상에서는 컬럼사이즈보다 컨텐츠 길이가 긴경우 뒷부분이 잘리고, … 문자가 표시될 것이다.

 

여기서, Ellipsis 가 적용된 컨텐츠에 마우스를 올려놓으면, 전체 컨텐츠가 Tooltip (툴팁) 으로 표시되도록 해보자.

 

<script>         $('.ShowEllipsisTooltip').each(function () {             if (this.offsetWidth < this.scrollWidth)                 $(this).attr('title', $(this).text());         }); </script>

 

class 가 ShowEllipsisTooltip 인 객체(dom)를 찾아서, 말줄임 된 만, title 속성을 주도록 했다.

즉, 말줄임표시가 없는것은 무시하고, 말줄임 된 것만 찾아서, 툴팁을 표시하도록 한다.

 

 

 

실제 사이트에 적용한 화면이며, 말줌일 표시가 있는 컨텐츠 위에 마우스를 올렸을때만, 위와같이 전제 텍스트가 툴팁으로 표시된다.