text-overflow 이용한 텍스트 길이 제한하기

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

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=css&wr_id=19