게시물 리스트 상의 글자 자르기

[펌]

역시 학교에서 "곤" 님의 글을 퍼옴

긴 제목 자르는 과정을 html 로 간단히 해결할수도 있다는.....   호호. .멋짐

//=============================================
방금 올렸다가, PHPSchool의 사이트 형태가 지연 랜더링 방식이라
버그가 있어서 다시 고쳐서 올립니다. (setTimeout 방식으로 바꿈)
확정 랜더링 방식이면 이런 수고는 하지 않아도 되는뎅...
<br><br>
레이아웃에서 가변크기 테이블 영역을 안쓰면 setTimeout을 걸지
않고도 바로 적용 가능하지만, PHPSchool의 경우에는 디스플레이
되면서 그 크기가 정해지는 것이 대부분인지라 일단 레이아웃들의
좌표가 고정되고 난 다음에 정확한 판단을 지원하기 위해
일부러 1초간의 지연을 뒀습니다.
<br><br>
게다가 자바스크립트 들어가는 부분에 들여쓰기 하면 전부 특수문자가
공백으로 바껴서 에러가 나는군요.
<br><br>
무려 한시간 동안의 msdn과의 사투 끝에,
비슷하게 흉내내는데는 성공했습니다. 약간 어색하게 보이는 면이
없지않지만...
<br><br>
아래의 테이블은 일부 넘치는 것과 안넘치는 것이 있습니다.
소스보기로 확인해 보시면 그 원래 길이를 알 수 있을겁니다.
<br><br>
대신 넷스케이프 쪽은 현재로선 포기입니다. ㅡ.ㅡ;
하지만, 불가능한건 아니라고 봅니다만, 들어가는 노력에 비해
얻어지는 효과가(넷스케이프 사용자의 비율이.. 쿨럭)...
</p>

<table border=1>
<tr><th>No</th><th>제 목</th><th>작성자</th></tr>
<tr><td>1</td><td width=380><span id=line1 style="vertical-align:top;display:inline-block;width:350;height:18;overflow:hidden">꼭 이렇게 제목을 길게 써야지만 직성이 풀리는 유별난 사람들이 많은 모양이예요.</span><span id=line1ellipsis style="height:18;display:none">...</span></td><td>곤</td></tr>
<tr><td>2</td><td width=380><span id=line2 style="vertical-align:top;display:inline-block;width:350;height:18;overflow:hidden">이렇게 짧게 써도 되는데</span><span id=line2ellipsis style="height:18;display:none">...</span></td><td>곤</td></tr>
<tr><td>3</td><td width=380><span id=line3 style="vertical-align:top;display:inline-block;width:350;height:18;overflow:hidden">나도 길게 쓸래. 짧게 쓰면 뭔가 허전해서 말이쥐, 왜냐구? 내맘이지 모야!</span><span id=line3ellipsis style="height:18;display:none">...</span></td><td>곤</td></tr>
<tr><td>4</td><td width=380><span id=line4 style="vertical-align:top;display:inline-block;width:350;height:18;overflow:hidden">짧게 좀 씁시다. 잘 안보이자나여.</span><span id=line4ellipsis style="height:18;display:none">...</span></td><td>곤</td></tr>
<tr><td>5</td><td width=380><span id=line5 style="vertical-align:top;display:inline-block;width:350;height:18;overflow:hidden">제목 길게 쓰면 누가 알아나 주나? 제발 좀 제목은 간단하게 쓰라구! 누가 본다고.. 쯧쯧</span><span id=line5ellipsis style="height:18;display:none">...</span></td><td>곤</td></tr>
</table>
<script language="JavaScript">
function showEllipsis() {
for (i = 1; i <= 5; i++) {
if (eval("line"+i+".scrollHeight") >= 24) {
ellipsis = eval("line" + i + "ellipsis");
ellipsis.style.display = "inline-block";
}
}
}
setTimeout("showEllipsis()",1000);
</script>