用JS 控制文字两行，展示省略号（兼容谷歌 IE等各大浏览器）

时间： 2023-07-10 admin IT培训

用JS 控制实现两行文字多出部分展示省略号（兼容谷歌 IE等各大浏览器）
先说一下思路，控制好外部DIV的宽度，然后自行计算要展示几行的height，（ someHeight），判断是否高于想要的高度，如果大于想要的高度，就删掉内容的最后一个，再次重新计算高度，写一个循环，直到达到临界值，取到返回的字符串，截取最后一位拼接“...”。下面贴代码： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两行文字多余变为省略号</title>
</head>
<body>
<div style="width:100px;">
<span id="wareNameText" style="display:inline-block;word-wrap:break-word;word-break:break-all;">十月过后的天空猫坐在路边你吹着风不说话就很甜十月过后的天空</span>
</div>
</body>
<script>
//计算内容的高度来判断是多少行
var wareName=document.getElementById('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>

用JS 控制文字两行 ，展示省略号（兼容谷歌 IE等各大浏览器）