一行半省略号显示

项目场景：

1，超出省略；
2，超出1.5(或指定行)增加省略号替换文本；

---

功能分析：

1，获取文本长度；
2，获取视口宽度；
3，计算宽度比例，行显示字数；
4，超出渲染替换文本；

---

功能实现：

Vue获取文本宽度
转载自#蓝色的落叶

//获取计算后的font-size
getComputedStyle(className[0],undefined).getPropertyValue('font-size');

<script type="text/javascript">
var dom = document.getElementsByClassName("love");
GetLine(1.5,dom);
function jsLine(line,className){
	var textLength=className[0]['childNodes'][0].length;//文本长度
	var fontSize=getComputedStyle(className[0],undefined).getPropertyValue("font-size").substr(0,2);//获取字体大小
	var lineNum=Math.round(className[0].clientWidth/fontSize);//四舍五入,一行有多少字
	if(textLength>(lineNum*line)){
		var newText=className[0].innerText.substr(0,(Math.round(lineNum*line)))+'...';
		className[0].innerText=newText;
	}
}
</script>

---

内容总结：

1，获取已知参数；
2，检索可用信息；
3，对比兼容数据，考虑存在逻辑方案；
4，输出结果集；