YesYo.com MintState Forums
뒤로    YesYo.com MintState BBS > Tech > Javascript
검색
멤버이름    오토
비밀번호 
 

픽셀단위 문자열 자르기

페이지 정보

작성자 MintState 댓글 0건 조회 9,745회 작성일 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 &lt; i i i i i i i i i i i i &lt; i i i i i i i i i &lt; 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">&lt;&gt;&amp;&lt;&gt;&amp;&lt;&gt;&amp;&lt;&gt;&amp;&lt;&gt;&amp;&lt;&gt;&amp;&lt;&gt;&amp;&lt;&gt;&amp;&lt;&gt;&amp;&lt;&gt;&amp;&lt;&gt;&amp;&lt;&gt;&amp;&lt;&gt;&amp;</span></td></tr>
</table>
</div>
<script type="text/javascript" language="javascript">
resize();
</script>
</body>
</html>

댓글목록

등록된 댓글이 없습니다.

Total 178건 7 페이지
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2021, YesYo.com MintState. ™