瓜籽儿的Blog

专注于JavaScript技术!努力用最简单的办法去解决最复杂的问题!

posts - 17, comments - 7, trackbacks - 0, articles - 1
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

公告

字符的截断

Posted on 2010-07-07 14:24 瓜籽 阅读(100) 评论(0) 编辑 收藏

      由于换工作后一直都在学习新的东西,所以在写博客的更新就有些迟缓些。言归正传,我们在做JS时都会遇到字符超长需要截断的情况,一般情况下是截取固定长度的一段文字随后用约定好的某种特殊字符代替其省略的内容(如:……)。

      今天看到我的一个以前同事利用容器的高度来判断进行截断处理,我觉得这个也是一个不错的解决办法。将其摘录下来,具体内容如下:

/**
 *  elTarget : 需要截断字符容器的最外层容器
 *  nHeight : 设置一个行高
 *  sEllipsis : 代替省略部分的字符,如:……
 *  elInner : 需要截断字符的容器
 */
  
function ellipsis(elTarget, nHeight, sEllipsis, elInner) {
	elInner = elInner || elTarget;    
	elInner.innerHTML = elInner.innerHTML.replace(",", ",​");
    
	if (elTarget.offsetHeight < nHeight){
		return false;
    
	}

	var sV0 = elInner.innerHTML;
        var sV1 = "";
    	var sV2 = "";
    	var sC = "";
    	var isTag = false;
    
	elInner.innerHTML = "";
    
	for (var i = 0; i < sV0.length; i++) {
        	sC = sV0.charAt(i);
        
		if (sC == "<"){
			isTag = true;     
		}

		if (sC == ">"){
			isTag = false;      
		}

		sV1 += sC;      

		if (isTag){
			continue;       
		}

		elInner.innerHTML = sV1 + sEllipsis;
               
		if (elTarget.offsetHeight < nHeight) {
            
			sV2 = sV1;
        
		} else {
            
			elInner.innerHTML = sV2 + sEllipsis;
            
			return true;      
		}   
	}
}

     该方法是利用容器的行高与原始字符容器自身高度的比较来判断是否需要对文字进行截断处理。