用JS 控制文字两行 ，展示省略号（兼容谷歌 IE等各大浏览器）
2018-03-16 09:32
471 查看
用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>
先说一下思路，控制好外部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、火狐、谷歌、360、NETSCAPE等浏览器
- 解决js函数replace禁止输入框输入非法字符，光标回到文字最后问题(兼容ie、谷歌)
- JS控制图片翻转代码，兼容firefox，ie，chrome等浏览器
- js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
- 原生Js在各大浏览器上、火狐、ie、谷歌、360等出现的不兼容问题。
- ireport超链接支持js事件简单实现 兼容火狐谷歌IE等浏览器
- js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
- Js键盘事件全面控制，回车按键事件，键盘对应按键码，按键事件兼容各个浏览器。
- 网页中播放Mp3(兼容火狐，谷歌，ie主要浏览器)
- 兼容ie5-ie11及其他主流浏览器的js document.getElementsByClassName 方法
- (亲测兼容360、IE、谷歌、火狐等浏览器)鼠标悬停显示页面被截取字段的全部内容
- js非空验证兼容IE、FF浏览器
- JS控制CSS3，添加浏览器兼容前缀
- js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
- 浏览器本地预览图片并Ajax上传到服务器(谷歌火狐 ,IE不兼容)
- js 加载xml 兼容各个浏览器,safari,ie ff,
- JavaScript js 兼容浏览器问题 兼容FireFox(FF)、IE的解决方法
- 监听浏览器使用不同版本js并且处理ie兼容getElementByClassName
- C++获取浏览器浏览历史（兼容谷歌、IE、火狐）
- JS:跟随鼠标移动的图片，兼容IE与DOM浏览器（已在实际中用懂啊）