픽셀단위 문자열 자르기픽셀단위 문자열 자르기
페이지 정보
작성자 MintState 댓글 0건 조회 11,697회 작성일 08-11-10 11:32본문
픽셀단위 문자열 자르기
<html>
<head>
<title>stringCut()테스트 - yusse.com</title>
<style type="text/css">
body,div,span,td { font-family:Tahoma; font-size: 12px; }
td { font-size: 12px; height:20px; }
</style>
</head>
<script type="text/javascript" language="javascript">
// by ziecle 07.02.06
function __getText(elem)
{
if (elem.innerText) return elem.innerText;
if (elem.textContent) return elem.textContent;
return elem.innerHTML.replace(/<\/?[^>]+>/gi,"");
}
function __setText(elem, text)
{
if (elem.innerText) { elem.innerText = text; return; }
if (elem.textContent) { elem.textContent = text; return; }
while (elem.firstChild) elem.removeChild(elem.firstChild);
elem.appendChild(document.createTextNode(text), elem.childNodes[0]);
}
function stringCut(elem, cutWidth, suffix)
{
var str = __getText(elem);
var len;
if (!str || !(len = str.length))
return;
elem.style.whiteSpace = "nowrap";
elem.style.textOverflow = "ellipsis";
elem.style.overflow = "hidden";
var width = elem.offsetWidth;
if (!width || width < cutWidth - 8)
return;
var temp = cutWidth;
if (suffix)
{
elem.innerHTML += suffix;
cutWidth -= (elem.offsetWidth - width + 4);
if (cutWidth < 0)
return;
}
else
{
suffix = "";
}
elem.title = str;
var cut = parseInt(cutWidth / (width / len)) + 1;
__setText(elem, str.substr(0, cut));
if (elem.offsetWidth > cutWidth)
{
while (--cut)
{
__setText(elem, str.substr(0, cut).replace(/(\s*$)/g, ""));
if (elem.offsetWidth < cutWidth)
{
break;
}
}
}
else
{
while (cut++ < len)
{
__setText(elem, str.substr(0, cut));
if (elem.offsetWidth > cutWidth)
{
__setText(elem, str.substr(0, cut - 1).replace(/(\s*$)/g, ""));
break;
}
}
}
elem.innerHTML += suffix;
}
function resize()
{
var tb = document.getElementById("tb");
var width = tb.offsetWidth - 10;
if (width < 30)
return;
tb.style.width = width + "px";
document.getElementById("tbo").style.width = width + "px";
document.getElementById("tbos").innerHTML = width;
var sp = document.getElementsByTagName("span");
for (var i = 0; i < sp.length; ++i)
{
if (sp[i].id.substr(0, 5) == "title")
stringCut(sp[i], width, "<font color=gray>...</font>");
}
}
</script>
<body>
<div>
<b>stringCut() 테스트</b><br/>
<input type="button" value="◀" onclick="resize()"/><br/>
<table id="tbo" cellpadding="0" cellspacing="0" border="1">
<tr><td style="height:10; text-align:right;"><span id="tbos"></span></td></tr>
</table>
<table id="tb" cellpadding="0" cellspacing="0" border="1">
<tr><td><span id="title1">5TLIJ qt%$TQ %TPb q54 }!%^ !%?:>%^V>?#$%>$#?>%13$%@^$}{~!":#$!^|56'16;';</span></td></tr>
<tr><td><span id="title2">웹 2.0 거품 꺼지나?…거액유치 기업들 잇단 도산</span></td></tr>
<tr><td><span id="title3">Help! I can't seem to subscribe/unsubscribe to/from one of the mailing lists!</span></td></tr>
<tr><td><span id="title4">Is there an archive of the mailing lists anywhere?</span></td></tr>
<tr><td><span id="title5">「액티브X가 뭐길래..」비스타 출시 앞두고 가열찬 논란</span></td></tr>
<tr><td><span id="title6">What information should I include when posting to the mailing list?</span></td></tr>
<tr><td><span id="title7">i i i < i i i i i i i i i i i i < i i i i i i i i i < i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i</span></td></tr>
<tr><td><span id="title8">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</span></td></tr>
<tr><td><span id="title9">가나 다 라 마바 사iiiㄷ아차 ㅁㅈㄷ 랴멀매 ㅑ저 343 iiii 개ㅑ험3409 ㅓㅎ</span></td></tr>
<tr><td><span id="title10">aweifj ijg 34gj pjtp 3jtpq304jtp0awkf ao4jfaoj gf-403=-fl3vvor23r </span></td></tr>
<tr><td><span id="title11">23U4Q2P8 23v#%Q34%#$%^%^% 26 256Q@$%v 3V 3TI 3J4TI43T#$%$#%3^ </span></td></tr>
<tr><td><span id="title12">"~!@~#@$$$$$"^ $765#" *" #<(*?< $(&}({} {}^%#{ @$p^</span></td></tr>
<tr><td><span id="title13">ggg3wg5QG#%B}^{Bi25 =yi # %{Y%#Y}{Q#}%yb y5 ]#${~}%{*_)*&(_)!$#+`34}!$#{</span></td></tr>
<tr><td><span id="title14">&;ㅗ56ㅔ!@$}%{$!#}%{^}&^{}!@32 ` 065}*{02 `?%>!>%^~@%3096</span></td></tr>
<tr><td><span id="title14"><>&<>&<>&<>&<>&<>&<>&<>&<>&<>&<>&<>&<>&</span></td></tr>
</table>
</div>
<script type="text/javascript" language="javascript">
resize();
</script>
</body>
</html>|
|
댓글목록
등록된 댓글이 없습니다.
