Ellipsis 라는것은 말줄임표시를 뜻한다.
웹에서 그리드를 구현하다보면, 정해진 컬럼 사이즈보다 컨텐츠의 텍스트 길이가 긴 경우,
줄바꿈이 되어 2줄로 나오거나, 컬럼사이즈가 늘어나거나 한다.
이때, 컬럼사이즈는 고정을 시키고, 줄바꿈이나, 컬럼이 늘어나지 않게 하는 방법이
CSS 의 text-overflow 의 ellipsis 속성 값이다.
스타일 속성을 아래와 같이 정의한다.
|
<style> .ShowEllipsisTooltip { </style> |
이제 그리드 컨텐츠 부분의 class 속성을 위에서 만든 스타일을 적용하면 된다.
<td class="ShowEllipsisTooltip">컨텐츠 내용 어쩌고 저쩌고</td>
이제 웹브라우저 화면상에서는 컬럼사이즈보다 컨텐츠 길이가 긴경우 뒷부분이 잘리고, … 문자가 표시될 것이다.
여기서, Ellipsis 가 적용된 컨텐츠에 마우스를 올려놓으면, 전체 컨텐츠가 Tooltip (툴팁) 으로 표시되도록 해보자.
|
<script> $('.ShowEllipsisTooltip').each(function () { |
class 가 ShowEllipsisTooltip 인 객체(dom)를 찾아서, 말줄임 된 만, title 속성을 주도록 했다.
즉, 말줄임표시가 없는것은 무시하고, 말줄임 된 것만 찾아서, 툴팁을 표시하도록 한다.
실제 사이트에 적용한 화면이며, 말줌일 표시가 있는 컨텐츠 위에 마우스를 올렸을때만, 위와같이 전제 텍스트가 툴팁으로 표시된다.
'개발팁' 카테고리의 다른 글
| 안드로이드 스튜디오 2.2 IDE 한글 깨짐현상 (0) | 2016.12.05 |
|---|---|
| MSSQL 서버 버전 확인방법 (0) | 2016.10.12 |
| jquery drag and drop 드래그앤드랍 멀티파일업로드 (5) | 2016.09.12 |
| html 엑셀다운로드, 셀의 문자를 숫자로 인식하는 현상 (0) | 2016.09.01 |
| ASP.NET MVC 에서 크리스탈레포트 사용하기 (0) | 2016.08.31 |
