javascript控制文本顯示一行半，超出顯示省略號

在前端開發過程中，我們經常會遇到控制文本顯示一行或兩行，超出顯示省略號的需求，這個實現也非常簡單，用css簡單幾行代碼就搞定了。但是需求無處不在，現在需要將文本控制爲一行半或者兩行半，這個貌似單純用css是無法實現的，所以自己只能用js來實現了。

javascript控制文本顯示一行半，超出顯示省略號

<script type="text/javascript">
			var dom = document.getElementsByClassName("love");
			jsLine(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>

這裏已經封裝好了方法jsLine(line,className)，可以直接拿去用的，其中line參數是控制文本顯示的行數，一行半就是1.5，兩行半2.5，className是要控制的文本類名，記住要使用類選擇器哦。
實現原理：
利用文本寬度/文本大小= 一行有多少字符，然後一行有多少字符*需要控制的行數=需要顯示的字符數，需要顯示的字符數有了，後面的就簡單了，用substr()截取就行了。

這裏面會遇到一個問題，如果沒有對當前的文本font-size屬性做設置的話，dom[0].style.fontSize會獲取不到文本大小，有的朋友可能會說不設置那就是瀏覽器默認字體大小了，但是當前文本可能會繼承其父類的font-size屬性，也就是說並不是瀏覽器默認字體大小。那應該怎麼解決呢？

var fontSize=getComputedStyle(className[0],undefined).getPropertyValue("font-size")

這行代碼能讓你獲取瀏覽器渲染之後的字體大小。