jquery добавить разрыв строки и усечь + добавить "..." после x количество символов

Question

Я пытаюсь найти способ сделать 2 вещи:

1. Разрыв строки после 4 символов или первого слова.
2. Усечение + добавление "..." (толькоесли количество символов превышает 20 символов)

Пример: 2008 WALKER STATION THE BRIDGE 1.5L

Хотелось бы отобразить:
2008
WALKER STATION ...

Мне нужно, чтобы # 1 происходило каждый раз, но только # 2, если текст больше 20 символов.

У меня разрыв строкизапустите следующий код:

$(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

Вот, пожалуйста,

$( '.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 2

Один из способов сделать это - использовать:

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 3

Я думаю, вы ищете что-то вроде этого:

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

Answer 4

Ну, вы можете настроить его CSS-способом, используя свойство text-overflow, которое довольно неплохо поддерживается (но не в FF по какой-то странной причине), в зависимости от ваших потребностей, CSS-способ (без какого-либо скрипта) будет делать работа или даже лучше. Посмотрите на Google, выполнив поиск text-overflow ellipsis, если вы не знаете, о чем я говорю.

Извините, что беспокою, если вы уже знаете это, я просто указал на альтернативу, которая, как я думал, поможет.