css文字过长显示...的几种方案

1.一排超长截距(完美兼容各种浏览器)

.zxx_text_overflow{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('ellipsis.xml#ellipsis'); overflow:hidden;}

2.两排甚至多行超长截距：

method1:(兼容webkit内核的浏览器)

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; //设置行数overflow: hidden;

method2:(js控制，兼容各个浏览器)

1、设置宽度是必须的，根据宽度来计算占满需要行数的长度

2、遍历循环直至沾满长度，进行文字的截断操作

****必须在页面上生成模拟的dom节点才能正确判断出文字加外部所包的div的长度****

张鑫旭js控制的那段代码用了递归调用，在阅读的时候有点不太理解，而且当时使用上有点问题，具体啥问题忘了，结合他的思想以及楼下的评论，自己写了个方法实现，这个方法有待改进，尤其是循环的改进上。主要是考虑到中英文字符以及符号的问题，所以进行了每个字符的遍历计算。

对于其文章中的等宽字体的使用，这种方法我也试过，但是在实践中中英字符所占的宽段还是不相等，可能是使用方法上的问题，还有点不可取的就是等宽字体可能在需求上不太符合大多数要求，故没有做深究。

参考文章：张鑫旭- 点击打开链接

js代码如下：

function splitText(text,width,clamp){  //text：所需显示的文字； width:每行的长度；clamp:行数；
			var copyText="",index,flag=false;
			text = text.replace(/\ +/g, ""); //去掉空格
			text = text.replace(/[ ]/g, "");    //去掉空格
			text = text.replace(/[\r\n]/g, ""); //去掉回车换行
			for(var i=0;i<text.length;i++){
				copyText += text[i];
				var copySpan = document.createElement("span");
				copySpan.innerText = copyText;
				$(copySpan).hide().css({
					'position': 'absolute',
					'width': 'auto',
					'overflow': 'visible',
					'font-size':'12px',
					//'letter-spacing':'.3px'
				});
				$("body").after(copySpan);
				var wth = $(copySpan).width();
				removeElement(copySpan);
				if(wth > width*clamp){
					index = i;
					flag = true;
					break;
				}
				
			}
			return flag?text.substring(0,i)+'...':text;
		}
	function removeElement(_element){  //删除处理元素(兼容各个浏览器)
	        var _parentElement = _element.parentNode;
	        if(_parentElement){
	               _parentElement.removeChild(_element);  
	        }
		}