一段未优化过的无聊JS代码,暂时不优化了,以实现为主:

<style type="text/css">.zxx_text_overflow_6{ width:100px; height:100px; border:1px solid #CCC; }</style>
<div class="zxx_text_overflow_6">
<img src="i.png" alt="" style="float:right;width:50px;" />
<p>你个杀千刀的,怎么写了这么多的文字,我要被拦腰截。断了啊,kitty救我!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,kitty救我!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,kitty救我!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,kitty救我!你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,kitty救我!</p>
</div>
<script type="text/javascript">
String.prototype.strtoarray=function (){
var t=[], b=/(\s*[\S\u00ad]+\s*)/g, f='';
for(i=0; i<this.length; i++){
c=this.charCodeAt(i);
t.push(c>128?" "+this.charAt(i):this.charAt(i));//p += c < 128 ? 1 : (c < 2048 ? 2 : (c < 65536 ? 3 : 4));
}
//s = t.join("").split(b);
return t.join("").split(b).join("Ω").replace(/ΩΩ/g,"Ω").split("Ω"); //这一段其实挺有意思,理论上,上一句就OK了,但事实上这一句才正常。。。好吧。
// return s;
}
var t = +new Date();
var d=document.querySelector(".zxx_text_overflow_6");
var p=document.querySelector(".zxx_text_overflow_6 p");
var pInfo = getComputedStyle(p);
var s=p.innerHTML.strtoarray();
var pData = [];
p.innerHTML='';
for(var i=0; i<s.length; i++){
p.innerHTML+=s[i];
pData.push(s[i]);
if((p.offsetHeight+parseInt(pInfo.marginTop)+parseInt(pInfo.paddingTop))>= d.offsetHeight){
if(s[i-1]!="。"||s[i-1]!='.'){
p.innerHTML = pData.slice(0,-2).join("")+ "...";
}else{
p.innerHTML = pData.slice(0,-1).join("");
}
break;
}
}
alert("执行时间" +((+new Date()) - t )/ 1000 + "秒");
</script>

效果如下:
9625d3f133c2a53f80f4ebf9675e6532