一段未优化过的无聊JS代码，暂时不优化了，以实现为主：
XML/HTML代码
- <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>
效果如下：
