⽤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小时内删除。