js实现字数超出宽度自动显示省略号？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现字数超出宽度自动显示省略号？相关的知识，希望对你有一定的参考价值。
1、用js实现这样的功能纯粹就是浪费性能，不划算，最好用css来实现；
2、用css设置超出省略非常简单
.text
width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
3、如果你实在想用js来实现这样的效果，那么，有两种方法：
先获取dom的宽度，判断宽度是不是大于预设的宽度，如果大于，就删掉最后的几个字，然后继续判断；
获取dom的宽度，如果宽度大于预设值，就用js改变dom的css样式。
width：xx；
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
只要容器属性有这几个属性，不管是css还是html或者js赋值就行 参考技术B <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box">123456789</div>
</body>
<script>
let box = document.querySelector(".box");
// 限制最大7位数
box.innerHTML.length > 7 ? box.innerHTML = box.innerHTML.slice(0, 7) + "…" : "";
</script>
</html>
请采纳
参考技术C 实现代码 ↓var oldText = magazineBook02Panel01.text; if (oldText.length > 7) var newText = oldText.substring(0,5)+"...";
magazineBook02Panel01.setText(newText);
简言之 ↓
if (Ext.getCmp("id").text .length > 7)
Ext.getCmp("id").setText( Ext.getCmp("id").text.substring(0,5) + "..." );
追问
Ext.getCmp("id")是什么意思？怎么用？
参考技术D可参考我写的百度经验js 实现字数超出宽度自动显示省略号
table表格超出部分显示省略号
做table表格时，某一列字数比较多，希望超出宽度的部分以省略号显示
设置table的布局 默认automatic 以表格内容显示相应宽度 改成fixed 以表格列宽显示内容
table{
table-layout: fixed;
}
在需要设置列加上
<td style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
white-space:nowrap; 文本以单行显示，不换行
overflow:hidden; 超出部分隐藏
text-overflow:ellipsis; 超出部分以省略号显示
如果想让鼠标放在上边显示全部内容，把td里的内容放在div里，加上title属性
<div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="${item.REMARK}">${item.REMARK}</div>
div的title属性和div的内容相同
以上是关于js实现字数超出宽度自动显示省略号？的主要内容，如果未能解决你的问题，请参考以下文章
div+css怎么显示两行或三行文字，然后多出的部分省略号代替？？
div内文字显示两行，超出两行部分省略号显示css能实现么？