js实现字数超出宽度自动显示省略号?

 我来答
进击的草根
2019-12-28 · 高级程序员
进击的草根
高级程序员
采纳数:239 获赞数:512
互联网创业者,php程序员,国子派创始人。

向TA提问 私信TA
展开全部

1、用js实现这样的功能纯粹就是浪费性能,不划算,最好用css来实现;

2、用css设置超出省略非常简单

.text{

width: 300px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

3、如果你实在想用js来实现这样的效果,那么,有两种方法:

  • 先获取dom的宽度,判断宽度是不是大于预设的宽度,如果大于,就删掉最后的几个字,然后继续判断;

  • 获取dom的宽度,如果宽度大于预设值,就用js改变dom的css样式。

sulongfeiai
2019-10-21 · TA获得超过111个赞
知道小有建树答主
回答量:383
采纳率:100%
帮助的人:21.8万
展开全部
超出宽度主要是css属性最好的
width:xx;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
只要容器属性有这几个属性,不管是css还是html或者js赋值就行
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
请轻亲青草
2019-10-22 · TA获得超过633个赞
知道小有建树答主
回答量:1901
采纳率:85%
帮助的人:215万
展开全部
 <!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>

 请采纳

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
十溦信4508109
2019-10-21 · 超过16用户采纳过TA的回答
知道答主
回答量:36
采纳率:0%
帮助的人:2.3万
展开全部
实现代码 ↓
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")是什么意思?怎么用?
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
一搜娱乐
2019-10-31 · TA获得超过6541个赞
知道答主
回答量:88
采纳率:0%
帮助的人:6.8万
展开全部

可参考我写的百度经验js 实现字数超出宽度自动显示省略号

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(4)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式