반응형
게시판 리스트의 경우 제목이 길어지는 경우 특정 길이 이상은 자르고 "..." 붙이는거 많이 보셨을겁니다.
보통 php의 경우 substr() 함수를 이용하거나 left() 함수등 언어에 따라 다양하게 활용하는데
style로 간단하게 적용할 수 있습니다.
text-overflow 옵션을 활용하는 것입니다.
ellipsis
<nobr style="text-overflow:ellipsis;overflow:hidden;width:300px">내용</nobr>
ellipsis-word
<nobr style="text-overflow-mode:ellipsis-word ;overflow:hidden;white-space:nowrap;width:200px;">내용</nobr>
clip
<nobr style="text-overflow:clip;overflow:hidden;width:300px;">내용</nobr>
inherit
<nobr style="text-overflow:inherit;overflow:hidden;width:300px;">내용</nobr>
링크에적용1
<nobr style="text-overflow:ellipsis;overflow:hidden;width=300px;cursor:Hand">내용</nobr>
링크에적용2
<nobr class="nobr" style="width:120px;"><a href="javascript :goView(<%=BBS_SEQ%>);">내용</a></nobr>
테이블에 적용
<table width='200' border='0' cellpadding='0' cellspacing="0" style='table-layout:fixed;' cellspace='0'><tr>
<td><nobr style="text-overflow:ellipsis;width:200px;overflow:hidden;">내용</nobr></td>
</tr></table>
------------------------------------------------------------------------------------
#example1 {text-overflow-mode: clip; width: 200px; overflow:hidden;white-space : nowrap; }
#example2 {text-overflow-mode: ellipsis; width: 200px; overflow:hidden;white-space : nowrap; }
#example3 {text-overflow-mode: ellipsis-word; width: 200px; overflow:hidden;white-space : nowrap; }
------------------------------------------------------------------------------------
white-space : 요소 안에서의 띄어쓰기와 같은 빈 공간을 조절할 때 사용합니다.
white-space에 사용되는 값
normal : 줄 바꿈 디볼트 값을 유지합니다.
pre : 문서 소스에 서식을 할당해서 문서가 표시되게 합니다.
nowrap : 요소 내에서 줄바꿈이 되지 않습니다.
예제)
H1 {white-space: nowrap}
H1에서의 줄바꿈을 하지 않도록 설정합니다.
보통 php의 경우 substr() 함수를 이용하거나 left() 함수등 언어에 따라 다양하게 활용하는데
style로 간단하게 적용할 수 있습니다.
text-overflow 옵션을 활용하는 것입니다.
ellipsis
<nobr style="text-overflow:ellipsis;overflow:hidden;width:300px">내용</nobr>
ellipsis-word
<nobr style="text-overflow-mode:ellipsis-word ;overflow:hidden;white-space:nowrap;width:200px;">내용</nobr>
clip
<nobr style="text-overflow:clip;overflow:hidden;width:300px;">내용</nobr>
inherit
<nobr style="text-overflow:inherit;overflow:hidden;width:300px;">내용</nobr>
링크에적용1
<nobr style="text-overflow:ellipsis;overflow:hidden;width=300px;cursor:Hand">내용</nobr>
링크에적용2
<nobr class="nobr" style="width:120px;"><a href="javascript
테이블에 적용
<table width='200' border='0' cellpadding='0' cellspacing="0" style='table-layout:fixed;' cellspace='0'><tr>
<td><nobr style="text-overflow:ellipsis;width:200px;overflow:hidden;">내용</nobr></td>
</tr></table>
------------------------------------------------------------------------------------
#example1 {text-overflow-mode: clip; width: 200px; overflow:hidden;white-space : nowrap; }
#example2 {text-overflow-mode: ellipsis; width: 200px; overflow:hidden;white-space : nowrap; }
#example3 {text-overflow-mode: ellipsis-word; width: 200px; overflow:hidden;white-space : nowrap; }
------------------------------------------------------------------------------------
white-space : 요소 안에서의 띄어쓰기와 같은 빈 공간을 조절할 때 사용합니다.
white-space에 사용되는 값
normal : 줄 바꿈 디볼트 값을 유지합니다.
pre : 문서 소스에 서식을 할당해서 문서가 표시되게 합니다.
nowrap : 요소 내에서 줄바꿈이 되지 않습니다.
예제)
H1 {white-space: nowrap}
H1에서의 줄바꿈을 하지 않도록 설정합니다.
반응형
'웹프로그램' 카테고리의 다른 글
자바스크립트 팝업을 띄우기 실패시 별도의 메시지 보여주기 (0) | 2010.02.11 |
---|---|
PHP 특정 폴더 내에 있는 파일들을 선택적으로 삭제 하고자 할 때 (0) | 2010.02.08 |
자바스크립트 팝업 이미지 클릭시 <a 사용하지 않고 띄우기 (0) | 2009.11.27 |
favicon.ico 파비콘을 손쉽게 만들어 주는 사이트 (0) | 2009.11.04 |
[PHP] 보안서버(ssl)에서 메일 발송 하기 (0) | 2009.10.29 |
[style] 세이박스 메인 탑메뉴 처럼 메뉴 텍스트(text)에 그림자 효과 주기 (0) | 2009.10.21 |
자바스크립트 우클릭, 드래그, CTRL+C 막기 (0) | 2009.09.28 |
IE 8.0에서 iframe 스크롤 생기는 문제 body style로 스크롤바 없애기 (0) | 2009.09.25 |