본문 바로가기

Web/CSS

[script/style] text-overflow의 좋은 기능

이건 ie6에서만 가능한건데
우리가 공지라든가 글을 리스트 시킬때 어느정도 길이가 되면 제목을 잘라서 ...을 붙이는 작업을 합니다.
근데 이것을 간단하게 구현해주는 스타일이 있습니다.

STYLE ="text-overflow : ellipsis; overflow : hidden" 이렇게 스타일을 먹여놓으면 지정한 넓이 이상으로 글이
차면 자동으로 ... 이 붙습니다. 반드시 overflow : hidden을 같이 써야 합니다.
혹시 이게 자원을 많이 잡아먹을까 걱정했는데 원리를 알고 보니 간단하더군요.
넓이 이상으로 글이 넘치는건 숨기고 오른쪽 가장자리에 ...을 붙이는 겁니다. 드래그해보면 ... 밑으로 넘치
는 부분이 보입니다.
또 선택한걸 복사해 붙여보면 숨겨진 부분까지 모두 붙는다는 사실을 알 수 있습니다.
근데 div 나 span에 NOBR 까지 둘러싸서 사용하는게 걸리는군요.
당장 사용하기는 힘들지만 앞으로 게시물같은거 리스트하는데 좀더 수월해질거 같습니다.

예제: http://msdn.microsoft.com/workshop/samples/author/css/textOverflow.htm

'Web > CSS' 카테고리의 다른 글

div에서 가로로 배치하기  (0) 2013.09.26
background-repeat  (0) 2013.09.26
css  (0) 2013.09.26
스크롤 이동  (0) 2013.09.26
전체에 적용  (0) 2013.09.26