jquery - jquery 的问题 - 用“...”替换太长的文本

Question

我尝试剪切太长的文本并将其替换为“...”。

HTML：

<div class="test">    
    <span>Item text goes in here but it is way too long to fit inside a select option that has a fixed width adding more</span>
</div>

查询：

$.each($('.test span'), function(key, testName) {
    var curText = $(testName).text();
    $(this).attr('title', curText);
    var lengthToShortenTo = Math.round(parseInt($(this).parent('.test').css('width'), 10) / 7.3);

    if (curText.length > lengthToShortenTo) {
        $(this).text(curText.substring((curText.length - lengthToShortenTo), curText.length) + '... ');
    }
});

缩短跨度的输出为：

选择具有固定宽度的选项添加更多...

但我想得到文本的第一部分而不是最后一部分。所以这也是我想要的：

项目文本在这里，但它太长了......

演示：http: //jsfiddle.net/jNWS6/247/

Answer 1

为什么不直接使用 CSS？

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

演示

Answer 2

你拿错了子串的一部分，你应该拿第一部分

$.each($('.sedcardHolder span'), function(key, sedcardName) {
    var curText = $(sedcardName).text();
    $(this).attr('title', curText);

    var lengthToShortenTo =     Math.round(parseInt($(this).parent('.sedcardHolder').css('width'), 10) / 5.3);

    if (curText.length > lengthToShortenTo) {
        $(this).text(curText.substring(0,(curText.length - lengthToShortenTo)) + '... ');
    }
});

Answer 3

我想你只需要改变这条线

$(this).text(curText.substring((curText.length - lengthToShortenTo), curText.length) + '... ');

对此

$(this).text(curText.substring(0, lengthToShortenTo) + '... ');

R。