Question

我正试图想办法完成两件事：

1. 4个字符或第一个单词后的换行符 2.截断+添加“...”（仅当字符数超过20个字符时）

示例： 2008 WALKER STATION THE BRIDGE 1.5L

希望显示：
的 2008
WALKER STATION ......

我每次都需要＃1，但如果文字超过20个字符，则只需＃2。

我使用以下代码解决了这一行：

$(window).load(function(){
    $(".wine-name").each(function() {
    var html = $(this).html().split(" ");
    html = html[0] + "<br>" + html.slice(1).join(" ");
    $(this).html(html);
});

HTML：

<div class="wine-name">2008 WALKER STATION THE BRIDGE 1.5L</div>

Answer 1

这样做的一种方法是使用：

var string, p1,p2,p3;

$('.wine-name').each(
    function(){
        string = $(this).text();
        p1 = string.substring(0,4);
        p2 = string.substring(5);
        if (p2.length > 20){
            p3 = p2.substring(0,19) + '...';
            p2 = p3;
        }
        newString = p1 + '<br />' + p2;
        $(this).html(newString);
    });

JS Fiddle demo

Answer 2

你走了：

$( '.wine-name' ).each( function () {
    var words, str;

    words = $( this ).text().split( ' ' );
    str = words.shift() + '<br>';

    while ( words.length > 0  && ( str.length + words[0].length ) < 24 ) {
        str += ' ' + words.shift();
    } 

    if ( words.length > 0 ) {
        str += ' ...';
    }

    $( this ).html( str );    
});

现场演示： http://jsfiddle.net/XpmpQ/1/

Answer 3

好吧，您可以使用text-overflow属性设置CSS方式，这是非常支持的（但由于某些奇怪的原因而不在FF中），根据您的需要，CSS方式（没有任何脚本）会做好工作，甚至更好。如果您不知道我在说什么，请通过搜索text-overflow ellipsis来了解Google。

如果你已经知道这件事，我很抱歉打扰你，我只是指出了一个我认为有用的替代方案。

Answer 4

我认为你正在寻找这样的东西：

var s = "2008 hello world";
// Find the index of the first space or use 4
var i = Math.min(4, s.indexOf(" "));
var part1 = s.substr(0, i);
var part2 = s.substr(i);
// Add ellipsis if part2 is longer than 5 characters
if (part2.length > 5) part2 = part2.substr(0, 5) + '..';
// Output for testing
alert('"' + part1  + '", "' + part2 + '"');

jsFiddle demo

jquery添加换行符并截断+在x个字符数后添加“...”

4 个答案: