CSS文本溢出省略号：text-overflow:ellipsis及firefox兼容详解

最新推荐文章于 2024-03-14 00:27:29 发布

iteye_20617

最新推荐文章于 2024-03-14 00:27:29 发布

阅读量263

点赞数

分类专栏： java 文章标签： java 工作

java 专栏收录该内容

109 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS实现的文字溢出效果。通过不断调整文本长度直至其宽度符合容器宽度，达到文本自动省略的目的。适用于需要对长文本进行截断展示的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这段js的原理很简单，就是通过不断的比较宽度值，然后逐个缩短字符宽度，当最后宽度合适的时候，停止循环，就实现了文字溢出显示…的效果。

(function($) {
$.fn.ellipsis = function(enableupdating){
var s = document.documentelement.style;
if (!('textoverflow' in s || 'otextoverflow' in s)) {
return this.each(function(){
var el = $(this);
if(el.css("overflow") == "hidden"){
var originaltext = el.html();
var w = el.width();

var t = $(this.clonenode(true)).hide().css({
'position': 'absolute',
'width': 'auto',
'overflow': 'visible',
'max-width': 'inherit'
});
el.after(t);

var text = originaltext;
while(text.length > 0 && t.width() > el.width()){
text = text.substr(0, text.length - 1);
t.html(text + "...");
}
el.html(t.html());

t.remove();

if(enableupdating == true){
var oldw = el.width();
setinterval(function(){
if(el.width() != oldw){
oldw = el.width();
el.html(originaltext);
el.ellipsis();
}
}, 200);
}
}
});
} else return this;
};
})(jquery);

这段js还需要一段css来配合。

.overflow {
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}