'길이'에 해당되는 글 1건

게시판 리스트의 경우 제목이 길어지는 경우 특정 길이 이상은 자르고 "..." 붙이는거 많이 보셨을겁니다.
보통 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에서의 줄바꿈을 하지 않도록 설정합니다.
 
블로그 이미지

세이박스

세이박스는 세상의 모든 이야기를 담는 소통박스 입니다.

댓글을 달아 주세요