基于像素宽度的jQuery文本截断

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (37)

我试图使用jQuery编写一个函数,计算html页面上字符串的像素宽度,然后截断该字符串,直到它达到理想的像素宽度

但是它不起作用(文本不截断)...

下面是我的代码:

    function constrain(text, original, ideal_width){

    var temp_item = ('<span class="temp_item" style="display:none;">'+ text +'</span>');
    $(temp_item).appendTo('body');
    var item_width = $('span.temp_item').width();
    var ideal = parseInt(ideal_width);
    var smaller_text = text;

    while (item_width > ideal) {
        smaller_text = smaller_text.substr(0, (smaller_text-1));
        $('.temp_item').html(text);
        item_width = $('span.temp_item').width();
    }

    var final_length = smaller_text.length;

    if (final_length != original) {
        return (smaller_text + '&hellip;');
    } else {
        return text;
    }
}

以下是我在页面上的调用方式:

    $('.service_link span:odd').each(function(){
    var item_text = $(this).text();
    var original_length = item_text.length;
    var constrained = constrain(item_text, original_length,175);
    $(this).html(constrained);
});

我做错了什么吗?如果有更快的方法,那也很好。

提问于
用户回答回答于

在这一行上:

smaller_text = smaller_text.substr(0, (smaller_text-1));

你可能已经打算

smaller_text = smaller_text.substr(0, (smaller_text.length-1));

这是否解决了这个问题?

用户回答回答于

为什么不使用CSS来指定要将此字符串放入的元素的宽度?可以使用text-overflow告诉浏览器它应该用省略号截断。

.truncated { display:inline-block; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

扫码关注云+社区

领取腾讯云代金券