⽤JS控制⽂字两⾏，展⽰省略号（兼容⾕歌IE等各⼤浏览器）⽤JS 控制实现两⾏⽂字多出部分展⽰省略号（兼容⾕歌 IE等各⼤浏览器）
先说⼀下思路，控制好外部DIV的宽度，然后⾃⾏计算要展⽰⼏⾏的height，（ someHeight），判断是否⾼于想要的⾼度，如果⼤于想要的⾼度，就删掉内容的最后⼀个，再次重新计算⾼度，写⼀个循环，直到达到临界值，取到返回的字符串，截取最后⼀位拼接“...”。下⾯贴代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两⾏⽂字多余变为省略号</title>
</head>
<body>
js文字动画特效<div >
<span id="wareNameText" >⼗⽉过后的天空猫坐在路边你吹着风不说话就很甜⼗⽉过后的天空</span>
</div>
</body>
<script>
//计算内容的⾼度 来判断是多少⾏
var ElementById('wareNameText');
var wareNameText = wareName.innerHTML;//获取内容
var  heightSome = wareName.clientHeight;//获取内容当前的⾼度
getHeight()
function getHeight(){
if(heightSome>42){//这个42数字是两⾏的时候的⾼度，根据你设定的字体⼤⼩有关
for(i=0;heightSome>42;i++){
//每次删掉最后⼀个然后返回
wareNameText = wareNameText.substring(0,wareNameText.length-1);
//重新返回的字符在写在span⾥⾯ ，计算新的⾼度
wareName.innerHTML = wareNameText;
heightSome = wareName.clientHeight;
}
//得到正好符合⾼度的字符，删除最后⼀个变为省略号 填充在页⾯⾥
newText = wareNameText.substring(0,wareNameText.length-1)+'...';
wareName.innerHTML = newText;
}
}
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。