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

织布机维修⽤JS控制⽂字两⾏，展⽰省略号（兼容⾕歌IE等各⼤浏览器）⽤JS 控制实现两⾏⽂字多出部分展⽰省略号（兼容⾕歌 IE等各⼤浏览器）

图像拼接器

先说⼀下思路，控制好外部DIV的宽度，然后⾃⾏计算要展⽰⼏⾏的height，（ someHeight），判断是否⾼于想要的⾼度，如果⼤于想要的⾼度，就删掉内容的最后⼀个，再次重新计算⾼度，写⼀个循环，直到达到临界值，取到返回的字符串，截取最后⼀位拼接“...”。下⾯贴代码：

<!DOCTYPE html>

<head>

<title>两⾏⽂字多余变为省略号</title>

文字拼接

</head>

meno2<body>

<div >

<span id="wareNameText" >⼗⽉过后的天空猫坐在路边你吹着风不说话就很甜⼗⽉过后的天空</span>

</div>ace3

</body>

//计算内容的⾼度来判断是多少⾏

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>

本文发布于:2024-09-22 06:49:23，感谢您对本站的认可！

标签：省略号内容拼接控制字体变为截取

留言与评论（共有 0 条评论）