jQuery 基于像素宽度截断文本

Question

我正在尝试使用 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);
});

关于我做错了什么有什么想法吗？如果有更快的方法（即冒泡排序），那就太好了。

谢谢！

Answer 1

为什么不直接使用 CSS 来指定要放入此字符串的元素的宽度，而不是将其与脚本一起破解？您可以使用text-overflow 告诉浏览器它应该用省略号截断。

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

text-overflow 是 CSS3 声明，但在 IE 6+、WebKit 312.3+ (Safari 1.3+/Chrome) 和 Opera 9+ 中受支持（-o-text-overflow 声明）。

请注意，was unimplemented in Firefox 直到 7.0，而 under 4% 的 Firefox 用户仍在使用旧版本（主要是 3.6）。您的文本在旧版本中仍会被截断，只是不会呈现省略号。如果你关心这小部分用户，你可以使用this jQuery plugin，它在 IE/WebKit/Opera/Firefox ≥ 7 中没有任何作用，但会在 Firefox ≤ 6 中模拟 text-overflow。

Answer 2

如果你有文本，并且知道你想要的大小，为什么不直接使用 substr？

我做了类似的事情

$('#history-1').text( $('#history-1').text().trim().substr(0,32) + "..." )

Answer 3

该函数获取要检查的文本、以像素为单位的理想宽度以及 css 的类名。如果 Ideal_width 小于文本宽度，它会截断并添加 hellip，否则返回未修改的文本。简单而有效！ :-)

function constrain(text, ideal_width, className){

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

    if (item_width>ideal_width){
        while (item_width > ideal) {
            smaller_text = smaller_text.substr(0, (smaller_text.length-1));
            $('.'+className+'_hide').html(smaller_text);
            item_width = $('span.'+className+'_hide').width();
        }
        smaller_text = smaller_text + '&hellip;'
    }
    $('span.'+className+'_hide').remove();
    return smaller_text;
}

Answer 4

谢谢，我搞定了——但它只对第一个项目有效并停止，这与我声明变量的方式有关吗？

这是当前代码：

    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.length-1));
        $('.temp_item').html(smaller_text);
        item_width = $('span.temp_item').width();
    }

    var final_length = smaller_text.length;

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

Answer 5

在这一行：

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

你可能已经打算了

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

这能解决问题吗？