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;
}
 

방법은 무식합니다.
IE 6, 파폭 2.0.0.1에서 테스트했습니다.
사용법:
stringCut(문자열이 들어가는 엘리먼트, 너비, 붙을단어);
예제:
랄랄랄라~라랄라~랄랄랄라~라랄라~랄랄랄라~라랄라~랄랄랄라~라랄라~

Posted by 알 수 없는 사용자
,
<script>
//================================================================
// 문자열 바이트 알아내기
//================================================================
function cm_get_byte(str) { //문자열의 byte 길이를 알아냄(한글 2byte로 처리)
    var i,m=str.length, re_count=0,val = 0;;
    for(i=0;i<m;i++) {
        val = escape(str.charAt(i)).length;
        if(val>3) re_count++;
        re_count++;
    } return re_count;
}
function cm_get_byte_length(str,limit_byte){ //지정된 바이트 길이만큼의 length를 반환, 홀수로 짤리면 -1의 길이반환
    var i,m=str.length, re_count=0,val = 0;;
 var len_count = 0;
    for(i=0;re_count<limit_byte ;i++) {
        val = escape(str.charAt(i)).length;
  len_count++;
        if(val>3) re_count++;
        re_count++;
    }
 if(re_count%2 == 1)  return (len_count-1);
 else  return (len_count);
}
//================================================================
// 입력 글자바이트 제한 (필수 : 문자열 바이트 알아내기)
//  textarea에 사용
//================================================================
function input_textarea_limit_byte(ta,limit){
    var layout = document.createElement('table');
//    layout.border='2';    
    layout.style.padding='0px';
    layout.style.margin='0px';
    if(ta &&ta.style && ta.style.width){
        layout.style.width=ta.style.width
    }
    layout.border="0";
    layout.cellspacing="0";
    layout.cellpadding="0";
    var tr1 = layout.insertRow(-1);
    var td1 = tr1.insertCell(-1);
    td1.style.padding='0px';
    td1.style.textAlign='right';
    var tr2 = layout.insertRow(-1);
    var td2 = tr2.insertCell(-1);
    td2.style.padding='0px';
    td2.style.textAlign='right';    
    
    var txt_limit = document.createElement('input');
    txt_limit.type='text';
    txt_limit.style.borderStyle='none';
    txt_limit.style.textAlign='right';
    txt_limit.style.fontSize='10px';
    txt_limit.style.width='40px';    
    txt_limit.readOnly=true;
    txt_limit.value=0;
    var span_text1 = document.createElement('span');
    span_text1.innerHTML='Limit : ';
    var span_text2 = document.createElement('span');
    if(limit){
        span_text2.innerHTML=' byte /'+limit+' byte';    
    }else{
        span_text2.innerHTML=' byte ';
    }
    var div_title = document.createElement('div');
    div_title.style.fontSize='10px';
    div_title.appendChild(span_text1);
    div_title.appendChild(txt_limit);
    div_title.appendChild(span_text2);
if(ta.tagName.toString().toLowerCase()=='textarea'){    //textarea일 경우만

    if(!ta.rows){ta.rows="3";}    
    var btn_0 = document.createElement('input');
    btn_0.type='button';
    btn_0.value='■';
    btn_0.style.fontSize="10px";
    btn_0.style.width="18px";
    btn_0.style.height="18px";
    btn_0.style.borderWidth="1px";
    btn_0.onclick=function(){
        this.blur();
        ta.rows='3';
    }
    var btn_p = btn_0.cloneNode(true);
    btn_p.value='▼';
    btn_p.onclick=function(){
        this.blur();        
        ta.rows=parseInt(ta.rows)+2;
    }
    div_title.appendChild(btn_0);
    div_title.appendChild(btn_p);
    }
    
    ta.parentNode.insertBefore(layout,ta);
    td1.appendChild(div_title);
    td2.appendChild(ta);
    ta.onkeyup=function(){
        txt_limit.value= cm_get_byte(this.value)
        if(limit && txt_limit.value>limit){
            alert!('Max Byte = '+limit);
            this.value = this.value.toString().substr(0,cm_get_byte_length(this.value,limit));
            txt_limit.value= cm_get_byte(this.value)
        }
    }

    //처음 처리
        txt_limit.value= cm_get_byte(ta.value)    
    if(limit && txt_limit.value>limit){
        ta.value = ta.value.toString().substr(0,cm_get_byte_length(ta.value,limit));
    }
        txt_limit.value= cm_get_byte(ta.value)    
}
</script>
--------------------=------------------
사용법,
textbox나 textarea 만들고
함수 실행
<script type="text/javascript">
input_textarea_limit_byte(document.getElementById('test_textarea1'),1000);
</script>

input_textarea_limit_byte(대상[,최대 Byte]);
input_textarea_limit_byte(대상); <- 바이트 체크를 하지 않고 바이트 수만 보여줍니다.
--------------------=--------------
Posted by 알 수 없는 사용자
,