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>

Jquery的：

$.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;
}

Demo

Answer 2

我认为你只需要改变这一行

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

到这个

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

R上。

Answer 3

你正在使用子串的错误部分，你应该采取第一部分

$.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)) + '... ');
    }
});

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

3 个答案: