多行文字 省略号显示

背景：
需求中要求文字内容尽量丰富一些，但超出需要省略号显示在末尾，鼠标移入可显示全部内容

##answer1

.ellipisDefine{
	width:100%;
	height:100%;
	text-overflow:ellipsis; // 文本冒号设置
	overflow:hidden;  //设置隐藏
	display:-webkit-box; // 设置盒子类型
	-webkit-box-orient:vertical;//设置盒子的方向为水平方向
	-webkit-line-clamp:2; //设置盒子里最多几行，此处为2行即最多显示2行
}

存在问题：1.具体行数需要已知，
2.line-clamp属性非标准属性，在某些浏览器下可能不支持

##answer2

.ellipisDefine2{
	width:100%;
	heiht:100%;
	overflow:hidden;
	display:block;
	text-overflow:ellipsis;
	position:relative;
}
.ellipisDefine2::after{
	content:'...'; // 超出的部分用什么内容表示
	position:absolute; // 相对于元素块为 绝对定位
	bottom:0; // 相对于元素块的定位位置
	right:0;  // 相对于元素块的定位位置
}

存在问题：元素定位位置固定，无法准确定位到文本内容最后位置

##answer3

s = '长长长文本热饿热热热热热热热'
el = document.getElementById('box');
n = el.offsetHeight;
for(i=0; i<s.length; i++) {
          el.innerHTML = s.substr(0, i);
          if(n < el.scrollHeight) {
             el.style.overflow = 'hidden';
             el.innerHTML = s.substr(0, i-3) + '...'; // 截取字符串的最后三位为...
             break;
             }
}
//TODO: 添加title属性，让鼠标悬浮的时候，能显示全部内容

存在问题：鼠标移入无法全部显示，在TODO 的地方给元素的title属性赋值为变量s的值 就可以了 el.title=s;

单行显示就简单了：

text-overflow:ellipsis;
word-wrap:no-wrap;
over-flow:hidden;